IE7 <li>项目符号/悬停之外的数字</li>

Question

此处另一篇文章的后续跟踪：IE7 li bullet or number shown outside of div

在上一篇文章中，div之外的li元素是固定的，但现在我有另一个IE7错误与悬停元素。由于无法通过hover元素设置，我该如何解决这个问题呢？

P.S。显然我在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>中的其他元素，那是不可能的。当list-style-position元素获取 hasLayout 时，IE6 / 7中会出现错误的<li>行为。您希望完全避免元素上的 hasLayout 。 width是 hasLayout 触发器之一。

我建议在<span>中添加<li>（是的，如果你愿意，请抱歉）

<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;的CSS中移除<li>，然后使用line-height对其进行抵消，否则<span>将无法获得最高分。

如有必要，请使用IE6 / 7条件样式表。

Answer 2

我认为您需要在OL标记的规则中声明“list-style-position”：

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