垂直对齐（对于 IE！）

【问题标题】：Vertical alignment (for IE!)垂直对齐（对于 IE！）
【发布时间】：2010-12-01 18:29:32
【问题描述】：

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 似乎没有任何影响的下拉菜单。

谢谢！

【问题讨论】：

【解决方案1】：

是的，请改用相对+绝对定位。最基本的是：

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

【讨论】：

已经试过了，但就像我说的我不想使用 position:absolute;底部：0；因为它会干扰 z-index 似乎没有任何影响的下拉菜单。下拉菜单隐藏在这些图片下方。
因为只有 IE8（作为 IE8 运行并且不处于兼容模式）是唯一支持显示的 IE 版本：table-cell。如果 z-index 是一个问题，请明确设置它。