Vertikale Ausrichtung (für IE!)

Question

HTML:

<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;
}

.. funktioniert gut in modernem Browser, mit der Ausnahme, natürlich, IE!

Gibt es eine Abhilfe? Die andere Lösung, die ich versuchte, war position: absolute; Unten: 0; aber es stört die Drop-down-oben, wo z-Index scheint keine Wirkung zu haben.

Danke!

Answer 1

Ja, verwenden relativ + absolute Positionierung statt. Der Barebone davon ist:

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

Siehe

Absolute Positionierung Innen Relative Positionierung .