CSS3 PIE: ¿No está funcionando la compatibilidad con IE border-radius?

Question

Estoy tratando de hacer esquinas redondeadas en IE con el comportamiento adjunto CSS3 PIE.

Aquí es mi CSS:

.fieldRow { 
    clear:both; 
    padding: 0; 
    margin: 0; 
    overflow: hidden; 
    line-height:17px; 
} 
.alternate, .rowMousedOver { 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    behavior: url(PIE.php); 
    position: relative; 
} 
.rowMousedOver{ 
    background-color: #E2E66D !important; 
} 
.alternate { 
    background-color: #FCFEE8; 
} 

y aquí es un poco de HTML de ejemplo:

<div class="fieldRow alternate"> 
       <div class="label"><label id="title_label" for="title"> Title: </label></div> 
       <div class="fieldWrapper required text"> 
        <div class="cellValue"><input type="text" onchange="validateField(this)" name="title" id="title" value="Tax Free Savings Accounts" disabled=""></div> 
       </div> 
      </div> 

a través de JavaScript y agrego rowMousedOver a la fieldRow cuando se asoma.

¿Alguna idea de por qué esto no funciona? También intenté usar behavior: url(PIE.htc), pero tampoco tuve suerte con eso.

Gracias!

Answer 1

Las solicitudes PIE.htc deben responder con el tipo mime "text/x-component" - o IE no tocará el comportamiento. El PIE.php que uses debería arreglar esto. Si no está seguro de que este sea el caso, use la función de red de FireBug para verificar una solicitud directa al archivo.

También tenga en cuenta que la ruta a PIE.htc es relativa A LA PÁGINA HTML, no relativa al archivo css que usted esperaría. Así que considere hacer el camino al .htc absoluto. Aquí FireBug puede volver a ayudarlo a detectar si tiene un problema 404.

Más información en http://css3pie.com/documentation/known-issues/

Answer 2

El problema puede estar en su camino, dependiendo de dónde coloque el archivo PIE.htc. Tenga en cuenta que la documentación del Pie 'empezar' (here) menciona lo siguiente:

... tendrá que ajustar la ruta para que coincida con la que subió PIE.htc en el paso 2. Nota: esta ruta es relativa al archivo HTML que se está viendo, no al archivo CSS desde el que se llama.

Así behavior: url(PIE.htc); debería funcionar si el archivo PIE.htc está en la misma carpeta que el archivo html (por lo menos, que trabajó para mí :-)).

Sin embargo, no estoy seguro de lo que quiere ver redondeado ... el div que se vería afectado no parece tener ninguna característica visible. Si desea ver el div con esquinas redondeadas, puede hacer que el borde o fondo sea visible, como agregar border: 1px solid black; o background-color: someColor; a la clase fieldrow.

Si desea ver el campo de entrada redondeado, es posible que desee para declarar la clase como .fieldRow input {...}

Answer 3

trate de añadir un position: relative en que CSS comunicado. He tenido ese problema un par de veces y normalmente se resuelve haciendo eso. Se puede encontrar más información en: http://css3pie.com/documentation/known-issues/

Answer 4

Trate de añadir

position:relative; 
z-index: 0; 

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

Answer 5

respuesta de Neophyte aquí (para usar un comentario condicional en la sección de la cabeza) me ayudó cuando todo lo demás parecía bien/no hizo la diferencia (en la más simple de las páginas de prueba, desde IIS 7 con IE8)

http://www.webmasterworld.com/forum83/9144.htm

la esperanza de que ayude a alguien

Answer 6

También digno de mención - tuve un problema por el que las esquinas redondeadas no funcionaban en LTE IE8 cuando me había puesto un color de fondo con una regla !important después de ella. ¡Otra razón para no usar! ¡Importante!

Answer 7

una solución que funciona para mí es como sigue:

1. El camino a PIE.htc necesita ser, por ejemplo absoluta Comportamiento: url (App_Themes/default/PIE.htc)
2. Asegúrese de que el div que se establece el comportamiento in tiene un estilo de position: relative

Dan