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不顯示錶格單元屬性，所以你必須訴諸各種黑客。幸運的是，這個工作得很好。

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中以內聯塊方式對齊，從而爲您提供跨瀏覽器內聯元素。