css - 垂直对齐(对于 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; }

参见 Absolute Positioning Inside Relative Positioning .