Internet Explorer无法调整内联列表项宽度？

Question

我有一个无序列表，其列表项显示为内联。但是，它的布局相当复杂，所以让我告诉你小提琴：

• 全屏：http://jsfiddle.net/spryno724/F5CFD/embedded/result/
• 代码：http://jsfiddle.net/spryno724/F5CFD/

注意无序列表项如何使用display: table-cell属性（第一个列表项除外）延伸到最高列表项的高度。这允许第一个列表项具有垂直线，延伸无序列表的整个高度，字母“A”垂直对齐到顶部。

这个演示文稿在大多数浏览器中都很出色，当然还有Internet Explorer 8 ^[1] 的明显例外。以下是一些截图，以防您没有IE8：

• Chrome中出色的呈现效果：https://picasaweb.google.com/lh/photo/oI6rWHT8iS_0nKVQRb1o_hV2JJooBc4dMF1MOKsl3b4?feat=directlink
• IE8呈现同一页面，IE开发者工具突出显示第三个列表项的不稳定宽度：https://picasaweb.google.com/lh/photo/_n-WvfHYgUrPJ6jTdk24KxV2JJooBc4dMF1MOKsl3b4?feat=directlink

我可以采取哪些措施来保持您在Chrome（或IE1-IE8以外的任何其他浏览器）中看到的外观一样？

感谢您的时间。

[1]我们曾经对IE8做过什么，你讨厌我们???

Answer 1

不幸的是，IE不会呈现table-cell属性，所以你不得不求助于各种黑客攻击。幸运的是，这个很好用。

ul li {
    display: inline-block;
    *display:inline;
    zoom: 1;
    height: 100%;
    max-width: 130px;
    min-width: 130px;
    padding: 0px 0px 0px 15px;
    vertical-align: bottom;
}

这将允许元素在IE中以内联块方式对齐，为您提供跨浏览器的内联元素。