IE7尷尬的列表間距

Question

我有一個從列表構建的大菜單。

在我嘗試過的所有現代瀏覽器和IE8中，它都能正確顯示，但是在IE7中，列表項似乎具有大量的邊距，這些邊距取決於列表項的大小（請參見下面的圖像比較） ：

不幸的是，IE7中的調試工具並不是最佳選擇，我很難確定問題出在哪里。 源代碼在這里發布時有點冗長，所以我制作了一個JSfiddle以便您欣賞。

查看源代碼和工作演示

誰能看到這個神秘的間隔來自何處，我該如何直截了當？

Answer 1

在IE7中， <ul>標簽繼承了line-height : 1.5em ，在ie7中禁用它會消除煩人的空格。 更新的小提琴

這種情況是元凶

ul {
    /* line-height: 1.5em; */
    list-style-position: outside;
}

額外

好的，我明白您對空白的意思。 這看起來像是（令人驚訝的）那些煩人的ie7“功能”之一。 我只是通過黑客來解決

ul li, ul li a {
    /* Needed in ie7 to stop list items expanding vertically
    *line-height:1.2em;
}

同

* html ul li a {
    height:15px;
}

要么

ul#map > li > a.map-item {
    height:auto;
    *height:15px;
}

IE7中沒有空格的小提琴

更好的方法是創建僅IE7的樣式表，並將其聲明為標准樣式，而不是依賴於hack。

Answer 2

您是否嘗試過添加CSS以將所有樣式重置為所有瀏覽器相同？

通過包含重置的CSS文件，例如： http : //meyerweb.com/eric/tools/css/reset/，可能會幫助解決您的問題。