垂直对齐（适用于 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;
}

..在现代浏览器中工作得很好，当然，IE 除外！

有什么解决方法吗？我尝试的另一个解决方案是position:absolute;底部：0；但它会干扰上面的下拉列表，其中 z-index 似乎没有任何效果。

谢谢！

Answer 1

是的，使用相对+绝对定位代替。其要点是：

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

请参阅相对定位内的绝对定位。