Internet Explorer 9 (y 10) están renderizando mis esquinas redondeadas hacia atrás

Básicamente, lo que hace es redondear las esquinas superior derecha e inferior derecha en lugar de las esquinas superior derecha e inferior izquierda.Internet Explorer 9 (y 10) están renderizando mis esquinas redondeadas hacia atrás

Aquí está el CSS:

.formlabel, .formlabel2, .formhead{ 
    width:200px; 
    font-size:18px; 
    height:22px; 
    font-weight:normal; 
    background-color:#FF8000; 
    text-align:right; 
    margin-top:5px; 
    padding-right:1px; 
    border:none; 
    color:white;  
    -webkit-border-top-left-radius: 5px; 
    -webkit-border-bottom-left-radius: 5px; 
    -moz-border-radius-topleft: 5px; 
    -moz-border-radius-bottomleft: 5px; 
    border-top-left-radius: 5px; 
    border-bottom-left-radius: 5px; 
}

Por lo que he podido deducir, sucede porque están dentro de otra clase que tiene el atributo direction:rtl. Si agrego direction:ltr a las clases anteriores, las esquinas se redondean correctamente. (Puede probar esto usando el código anterior y agregando direction:rtl)

El problema es que el sitio está en hebreo, así que lo necesito para permanecer rtl.

¿Alguna idea?

Fuente

2011-09-11 jontsef

Stupid _stupid_ IE developers. Solo un poco de conformidad estaría bien de vez en cuando. – Bojangles

¿Quizás podría usar el posicionamiento absoluto para apilar dos elementos y poner el fondo y el borde y la dirección: ltr al elemento inferior y todo el contenido rtl en el elemento superior? – Neil

Hubiera pensado que una solución simple sería colocar un comentario condicional en el <head> para IE9 + para usar css que haya invertido.

<!--[if gte IE 9]> 
    <style> 
     .formlabel, .formlabel2, .formhead{ 
      border-top-right-radius: 5px; /* switched from left */ 
      border-bottom-right-radius: 5px; /* switched from left */ 
     } 
    </style> 
<![endif]-->

Si lo prefiere, en lugar de utilizar style en el comentario condicional, que puedan vincular a una hoja de estilo externa independiente en lugar.

Fuente

2011-09-11 23:39:33 tw16

Los comentarios condicionales ya no son compatibles con IE10. – duri

@duri: Eso es interesante. Aunque seguirá funcionando para IE9, y con suerte cuando se finalice IE10 se corregirá, suponiendo que alguien les informe del problema. – tw16

@jontsef: Como originalmente pensé, después de haber probado en IE10 el error se ha corregido, por lo que la instrucción condicional anterior funcionará para IE9. Por lo tanto, problema resuelto :) – tw16

Internet Explorer 9 (y 10) están renderizando mis esquinas redondeadas hacia atrás

Respuesta

Cuestiones relacionadas