Quan es mescla una posició absoluta amb coordenades [top|bottom]/right amb tipografia en cursiva (font-style: italic) l'Internet Explorer 7 mostra un scroll horitzontal.
Donat un XHTML:
<p>Lorem Ipsum dolor sit</p>
i aplicant un CSS tal com:
p {
position: absolute;
top: 0;
right: 0;
font-style: italic;
}
L'Internet Explorer 7 mostrarà un scroll horitzontal proporcional a la distància entre el punt (0,0) del viewport i el punt (0,0) de la caixa posicionada.
Dit amb altres paraules, si es desplaça la barra d'scroll fins al final la caixa posicionada absolutament mostrarà al punt (0,0) del viewport.
Per arreglar el problema es pot afegir unoverflow: auto a la caixa posicionada:
p {
position: absolute;
top: 0;
right: 0;
font-style: italic;
overflow: auto;
}
Aquest workaround no cal si hi ha una amplada definida:
p {
position: absolute;
top: 0;
right: 0;
font-style: italic;
width: 10em;
}
Cal tenir en compte que aquest bug només apareix si Internet Explorer està en compatibilitat directa amb els estandards.
L'Exemple del bug només mostra el cas erroni.
Comentaris
Comentat per Adrià García el 11/01/07
A saber com has trovat aquest bug ... :)
Comentat per Federico el 11/01/07
Seguramente un descendiente del bug en IE6 en que un bloque que contiene texto en cursiva se agranda un par de pixels para mostrar bien las letras. IE and italics problem.
Comentat per are el 12/01/07
Sí, ja pot ser això.