alignement vertical (pour IE!)

HTML:alignement vertical (pour IE!)

<div class="product"> 
    <a href="#" class="thumb"><img src="img/thumb_md.png" alt="" /></a> 
</div>

CSS:

.product .thumb {   
    position: relative; 
    display: table-cell; 
    vertical-align: bottom; 
    height: 130px; 
}

..works grand navigateur moderne, à l'exception, bien sûr, IE!

Y a-t-il une solution de contournement? L'autre solution que j'ai essayée était position: absolute; en bas: 0; mais il interfère avec la liste déroulante ci-dessus où z-index ne semble pas avoir d'effet.

Merci!

Source

2009-09-27 3zzy

Oui, utilisez le positionnement relatif + absolu à la place. Le barebone de c'est:

a.thumb { display: block; position: relative; height: 130px; } 
a.thumb img { display: block; position: absolute; bottom: 0; }

Voir Absolute Positioning Inside Relative Positioning.

Source

2009-09-27 08:25:11 cletus

Essayé que déjà, mais comme je l'ai dit, je ne veux pas utiliser la position: absolue; en bas: 0; car il interfère avec le menu déroulant au-dessus de celui-ci où z-index ne semble pas avoir d'effet. Drop-down cache ci-dessous ces images. – 3zzy

Depuis IE8 (fonctionnant comme IE8 et pas en mode de compatibilité) est la seule version de IE qui supporte display: table-cell. Et si z-index est un problème, définissez-le explicitement. – cletus

alignement vertical (pour IE!)

Répondre

Questions connexes