Scroll horitzontal al mesclar position: absolute i font-style: italic
Publicat el 11/01/2007
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