IE7無序列表中的奇怪CSS行為

Question

我有一個下拉列表，我正在嘗試使用IE7。 在其他錯誤中，讓我擊敗的一個錯誤是懸停時的錨點沒有將背景推到完整的填充高度。 它似乎保持在其li以及最終ul的范圍內。 我嘗試擴大ul和li的高度，但這似乎不起作用。 在所有其他瀏覽器中均可正常運行：

您應該看到的是：錨定標記在懸停時應在底部擴展50px（按照css #menu > ul > li:hover > a { padding-bottom:50px; } 。 background-color似乎並沒有增加錨點的邊緣。

我究竟做錯了什么？

Answer 1

IE7在<a>標記以外的項目上不支持:hover 。 由於您將:hover放在<li>因此它在IE7中不起作用。

當您將鼠標懸停在<li>時，需要添加一些JavaScript來將.hover類添加到<li> ，然后調整css使其也包括在內：

#menu > ul > li:hover > a,
#menu > ul > li.hover > a{ 
    padding-bottom:50px; 
}

[編輯]看來這僅在IE7以quirksmode渲染時才成立。 如果您使用嚴格的doctype，則應該可以在<li>上使用:hover

Answer 2

您是否嘗試過將錨點更改為

display:inline-block; 
zoom:1;

只有IE7才需要zoom ，它會觸發“ hasLayout ”

Answer 3

我認為觸發器hasLayout將解決該問題； 您可以使用somthin來做到這一點：

#menu > ul > li > a { display: inline-block;}

請注意，IE不支持:last-child 直至IE8 ，但是您可以使用:first-child 。

我還建議對使用<i></i>的部分使用偽元素，以免HTML中沒有不必要的標記。

Answer 4

我最終自己找到了解決方案。 默認情況下，每個li的錨點都設置為環繞其內容（display：inline？），並且將顯示設置為inline-block有點危險，因為它在IE7中的行為是無法預測的。

通過簡單地將錨設置為display：block，就可以使其在IE7中具有自身的尺寸，因此您不必將其簡單地包裹在其內容中即可。 因此，懸停時可能會影響所需的填充。

現在可以在IE7中使用： http : //jsfiddle.net/gzLVR/5/