Uso de CSS3Pie htc para border-radius en IE8

Question

Estoy usando el archivo CSS3Pie htc para habilitar border-radius en IE8, pero no estoy obteniendo ningún efecto. Mi CSS es:

button { 
    border-radius: 4px; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    behavior: url(PIE.htc); 
} 

He puesto PIE.htc en la raíz pública (como se hace en la página de demostración CSS3PIE), después de haber intentado en la misma carpeta, usando un URI relativa y una URI absoluta.

Las demostraciones están funcionando; ¡Simplemente no es mi código!

Gracias, Adam

Answer 1

Trate de añadir

position:relative; 
z-index: 0; 

como se sugiere aquí http://css3pie.com/forum/viewtopic.php?f=3&t=10

Esta pregunta es similar a la publicada aquí:

CSS3 PIE - Giving IE border-radius support not working?

Answer 2

La URL de PIE.htc como referencia en behavior: url(PIE.htc); es una URL relativa, por lo que es probable que esté buscando en el mismo directorio que la hoja de estilo, así que me gustaría sugerir la adición de una barra de convertirlo en una URL absoluta Pero dices que ya has hecho eso.

Compruebe que la URL que está especificando realmente carga el archivo PIE.htc, es decir, ponga esa URL directamente en su navegador y vea lo que sale. Es posible que su servidor web no lo esté atendiendo correctamente por una razón u otra (¿no reconoce el tipo mime? Etc.)

¿Ha pasado por el known problems on the PIE site? ¿Ha agregado position:relative; a su estilo? ¿Podría ser el problema conocido z-index?

Usted especifica que no funciona en IE8. ¿Lo has probado en IE7? IE6? ¿El mismo resultado? (Esto eliminará THS posibilidad de que sea un problema IE8-específico)

Por cierto - el punto relacionado, pero se debe poner el estilo border-radius a continuación las versiones con los prefijos específicos del navegador. Esta es la manera estándar de hacer las cosas, ya que significa que cuando, por ejemplo, Firefox comience a admitir border-radius, retomará el estilo estándar sobre -moz-border-radius. Si tienes la versión -moz debajo de ella, esa seguirá usándose, lo que puede no ser lo que deseas.

Answer 3

behavior: url(PIE.htc); 

Asegúrese de que no hay espacio entre el url y ( ya que esto impide que funcione en IE8

Answer 4

Como dijo Daniel Rehner, debe usar la posición: propiedades relativas e índice z para IE8. Si está utilizando un sitio web con subdirectorios para llamar al archivo CSS, también deberá usar una ruta absoluta en su CSS para PIE.htc: esta fue una parte de nuestro problema.

La otra parte del problema podría ser que su servidor no está produciendo el archivo PIE.htc como texto/x-component. Puede corregir eso a través de IIS o Apache, o llamar al script PIE.php en su CSS. Más información aquí: http://css3pie.com/documentation/known-issues/#content-type

Ambos problemas nos han atrapado y esperamos que te ayuden.

Answer 5

Sólo en caso de que alguien está tratando de aplicar esto a celdas de la tabla, se tendrá que aplicar al elemento position: relativetable (y no el td o th, a pesar de que esos son los elementos que se están redondeadas).

Answer 6

En realidad tuve este problema por una razón completamente diferente.

El radio del borde no funcionará si se aplica un filtro al mismo elemento. Estaba aplicando el radio del borde a un botón con un degradado lineal aplicado como filtro. Tan pronto como eliminé el filtro, el radio del borde funcionó.

Esto está documentado el comportamiento y los gradientes se aplicará usando -pie-background:

http://css3pie.com/documentation/supported-css3-features/#gradients