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