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

Question

我有一个无序列表，其列表项内联显示。但是，它的布局相当复杂，所以让我向您展示 Fiddle：

• 全屏：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 属性，所以你不得不求助于各种 hack。幸运的是，这个效果很好。

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 中以内联块方式对齐，从而为您提供跨浏览器的内联元素。