[英]IE7 <li> bullet/number outside of hover
Follow-up from another post here: IE7 li bullet or number shown outside of div 从这里的另一篇文章跟进: IE7 li bullet或div之外的数字
In the previous post, the li element outside the div was fixed, but now I have another IE7 bug with the hover element. 在上一篇文章中,div之外的li元素是固定的,但现在我有另一个IE7错误与悬停元素。 Since the hover element can not be set through the , how do I fix this one? 由于无法通过hover元素设置,我该如何修复?
PS Obviously I've been having some trouble with the hasLayout bug in IE, so it someone was to give a nice explanation it would be appreciated. PS显然我在IE中遇到了hasLayout错误,所以有人提出了一个很好的解释,我会很感激。
Again everything works in firefox, etc. 同样一切都适用于Firefox等。
The screenshots: 截图:
The code: 代码:
#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;
}
Unfortunately, that's not possible without bringing in another element in the <li>
. 不幸的是,如果不在<li>
引入另一个元素,那是不可能的。 The incorrect list-style-position
behaviour occurs in IE6/7 when the <li>
element get hasLayout . 当<li>
元素获得hasLayout时,IE6 / 7中会出现错误的list-style-position
行为。 You want to totally avoid hasLayout on the element. 你想完全避免元素上的hasLayout 。 The width
is one of the hasLayout triggers. width
是hasLayout触发器之一。
I suggest to put a <span>
in the <li>
(yes, sorry if you would cry) 我建议在<li>
放一个<span>
(是的,对不起,如果你会哭)
<li><span>Item</span></li>
and change the li:hover
style as follows 并更改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;
}
This way the span controls the width of the <li>
without giving it hasLayout . 这样,跨度控制<li>
的宽度,而不给它hasLayout 。 You only need to remove padding-top: 5px;
你只需要删除padding-top: 5px;
from the <li>
's CSS and counteract it with line-height
, otherwise the <span>
will not get the full height. 来自<li>
的CSS并用line-height
抵消它,否则<span>
将无法达到全高。
Make it if necessary an IE6/7 conditional stylesheet. 如果需要,可以使用IE6 / 7条件样式表。
I believe you need to declare "list-style-position" in the rule for your OL tag: 我相信您需要在OL标记的规则中声明“list-style-position”:
#create_request ol {
list-style-position: inside;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.