Error en el reposicionament d'una caixa posicionada de forma absoluta en Internet Explorer 6
Publicat el 18/07/2008
Una tècnica comú per crear cantonades personalitzades és usar quatre elements (/span, /div, etc.) amb quatre classes que permetin des de CSS posicionar-les amb un position: absolute i el parell de coordenades necessàries (top, right, bottom, left).
És a dir, quelcom tipus:
.bottom-left {
position: absolute;
bottom: 0;
left: 0;
}
Aquesta tècnica falla en Internet Explorer 6 quan es modifica la quantitat de contingut, és a dir, quan es modifica l'alçada degut a l'augment o disminució de contingut.
Quan hi ha una variació d'aquest tipus les caixes inferiors no recalculen la posició bottom: 0 de l'actual caixa. A l'exemple s'il·lustra l'error.
La solució és senzillament no usar la propietat bottom. Si les caixes ja es posicionen a lloc (si s'insereixen com a darrers fills) no cal afegir res ja que el top del flux coincideix amb la posició desitjada. Aparentment aquesta solució funciona amb tots els navegadors recents (Firefox 3, Opera 9.5, Safari 3, IE7).
Alternativament, si aquesta solució no funciona (Internet Explorer no se'l coneix per la seva consistència), es pot assignar a cada acció del commutador un valor de height diferent (per exemple 1% i 2%) de manera que a cada acció s'obliga l'IE a recalcular.
Comentaris