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;
}