a.css

esbudellant estàndards


Scroll horitzontal al mesclar position: absolute i font-style: italic

11/01/07

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 un overflow: 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.

Font: Bug: IE7 absolutely positioned italics

Comentaris

  1. Comentat per Adrià García el 11/01/07

    A saber com has trovat aquest bug ... :)

  2. 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.

  3. Comentat per are el 12/01/07

    Sí, ja pot ser això.

Afegir un comentari


© Arnau Siches. a.css està sota Llicència Creative Commons.