IE7

悬停之外的项目符号/数字

此处的另一篇文章的后续内容：IE7 li 项目符号或数字显示在 div 外部 https://stackoverflow.com/questions/6076730/ie7-li-bullet-or-number-shown-outside-of-div

在上一篇文章中，div 外部的 li 元素已修复，但现在我在悬停元素上遇到了另一个 IE7 错误。由于无法通过 来设置悬停元素，如何解决这个问题？

附：显然我在 IE 中的 hasLayout bug 上遇到了一些麻烦，所以如果有人能给出一个很好的解释，我将不胜感激。

同样，在 Firefox 等中一切正常。

The screenshots:

代码：

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

不幸的是，如果不引入另一个元素，这是不可能的<li>。不正确的list-style-position行为发生在 IE6/7 中<li>元素获取有布局。你想完全避免有布局在元素上。这width其中一个有布局触发器。

我建议放一个<span> in the <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;
}

这样，span 就可以控制宽度<li>不给它有布局。你只需要删除padding-top: 5px;来自<li>的 CSS 并抵消它line-height，否则<span>将无法获得完整的高度。

如有必要，将其设为 IE6/7 条件样式表。