2011-09-11 7 views
10

Fondamentalmente ciò che fa è rendere gli angoli in alto a destra e in basso a destra intorno agli angoli in alto + in basso a sinistra.Internet Explorer 9 (e 10) stanno rendendo i miei angoli arrotondati all'indietro

Ecco il 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; 
} 

Da quello che ho potuto dedurre, succede perché sono all'interno di un'altra classe che ha l'attributo direction:rtl. Se aggiungo direction:ltr alle classi sopra, allora gli angoli sono arrotondati correttamente. (Puoi provare questo utilizzando il codice sopra e aggiungendo direction:rtl)

Il problema è che il sito è in ebraico quindi ho bisogno che rimanga rtl.

Qualche idea?

+3

Stupido _stupid_ IE sviluppatori. Solo un po 'di conformità sarebbe carino di tanto in tanto. – Bojangles

+0

Forse potresti usare il posizionamento assoluto per impilare due elementi e mettere lo sfondo e il bordo e la direzione: ltr sull'elemento inferiore e tutto il contenuto rtl sull'elemento superiore? – Neil

risposta

1

Avrei pensato che una soluzione semplice sarebbe quella di inserire un commento condizionale nello <head> per IE9 + per usare css che si è invertito.

<!--[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]--> 

Se si preferisce, invece di utilizzare style nel commento condizionale, è possibile collegare a un foglio di stile esterno separato, invece.

+1

I commenti condizionali non sono più supportati in IE10. – duri

+0

@duri: È interessante. Anche se funzionerà ancora per IE9, e si spera che nel momento in cui IE10 sarà finalizzato, verrà corretto, supponendo che qualcuno li informi del problema. – tw16

+1

@jontsef: Come ho inizialmente pensato, dopo aver provato in IE10 il bug è stato corretto, quindi l'istruzione condizionale sopra funzionerà per IE9. Quindi il problema è stato risolto :) – tw16