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

Question

我有一个无序列表，其列表项以内联方式显示。然而，它的布局相当复杂，所以让我向您展示 Fiddle:

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

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

此演示文稿在大多数浏览器中运行良好，当然，Internet Explorer 8^[1] 是一个明显的异常(exception)。以下是一些屏幕截图，以防您没有 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 中以内联 block 方式对齐，从而为您提供跨浏览器的内联元素。