IE7 <li> 子彈/懸停之外的數字

Question

從這里的另一篇文章跟進： IE7 li bullet或div之外的數字

在上一篇文章中，div之外的li元素是固定的，但現在我有另一個IE7錯誤與懸停元素。 由於無法通過hover元素設置，我該如何修復？

PS顯然我在IE中遇到了hasLayout錯誤，所以有人提出了一個很好的解釋，我會很感激。

同樣一切都適用於Firefox等。

截圖：

代碼：

#create_request ol {
    width: 339px;

}

#create_request li {
    display: list-item;
    line-height: 23px;
    background-color: #E3E3E3;
    list-style: decimal;
    list-style-position: inside;
    padding-left: 25px;
    padding-top: 5px;
}

#create_request li.alternate {
    background-color: white;

}

#create_left li:hover {
    width: 356px;
    background: url('/images/list_add.png') 100% 100% no-repeat;
    background-color: #B0B0B0;
    cursor: pointer;
}

Answer 1

不幸的是，如果不在<li>引入另一個元素，那是不可能的。 當<li>元素獲得hasLayout時，IE6 / 7中會出現錯誤的list-style-position行為。 你想完全避免元素上的hasLayout 。 width是hasLayout觸發器之一。

我建議在<li>放一個<span> （是的，對不起，如果你會哭）

<li><span>Item</span></li>

並更改li:hover樣式如下

#create_left li:hover {
    background: #B0B0B0;
    cursor: pointer;
}
#create_left li:hover span {
    display: block;
    width: 356px;
    background: #B0B0B0 url('/images/list_add.png') 100% 100% no-repeat;
}

這樣，跨度控制<li>的寬度，而不給它hasLayout 。 你只需要刪除padding-top: 5px; 來自<li>的CSS並用line-height抵消它，否則<span>將無法達到全高。

如果需要，可以使用IE6 / 7條件樣式表。

Answer 2

我相信您需要在OL標記的規則中聲明“list-style-position”：

#create_request ol {
  list-style-position: inside;
}