What is it?
这是另一个IE bug,把一个浮动的<div>设置为相对定位,在它内部放一个list,给list设置一个背景。(IE不管你设置了一个背景图,还是颜色,还是都设置了,他们都会消失)。当这些情况在IE中出现时,背景会错误的显示。这有一些屏幕截图,你可以清楚的看到:
(IE6中会这样显示,IE7,IE8不这样显示)
这是给一个 <dl> 中的 <dt> 设置了背景之后,在IE中如何渲染的效果。印象还不够深刻是吧?我知道,但是你期望的效果是什么呢;这就是IE如果处理的结果。
<style>
div {
float: left;
position: relative;
width: 150px;
background: #fffdd5;
border: 1px solid #000; }
dt {
background: red; }
</style>
<div>
<dl>
<dt>Some Title</dt>
<dd>Some content</dd>
<dd>Some content</dd>
<dt>Some Title</dt>
<dd>Some content</dd>
<dd>Some content</dd>
</dl>
</div>
(IE6中会这样显示,IE7,IE8不这样显示)
这是IE如何渲染一个<ul>,<ul>中的<li> 被设置了背景色。第一个<ul>没有背景显示,但是第二个<ul>显示背景。同样的事情也放生在 <ol> 上。
<style>
div {
float: left;
position: relative;
width: 150px;
background: #fffdd5;
border: 1px solid #000; }
li {
background: red; }
</style>
<div>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
以防万一这些截图对你来说还不足够,下面是一个可恶的bug,两个并列的list,按照W3C的意图。
<style>
body {
font: 0.8em/1.5em Verdana,Helvetica,sans-serif;
}
div#wrapper {
text-align: left;
}
div#bug {
float: left;
position: relative;
width:200px;
border: 1px solid gray;
margin: 10px 30px 10px 50px;
padding: 10px;
}
div#working {
float: left;
width: 200px;
border: 1px solid gray;
margin: 10px;
padding: 10px;
}
div#bug dt, div#working dt {
background: #FF6666;
color: #000C6;
font-weight: bold;
}
</style>
<div id="wrapper">
<div id="bug">
<dl>
<dt>Where's my border?</dt>
<dd>Definition 1</dd>
<dd>Definition 2</dd>
<dt>Some Other Term</dt>
<dd>Definition 1</dd>
<dd>Definition 2</dd>
</dl>
<p>
This is the bug in action. Notice that while the second <dt>
has a background, the first has no background.
</p>
</div>
<div id="working">
<dl>
<dt>Check out my border!</dt>
<dd>Definition 1</dd>
<dd>Definition 2</dd>
<dt>Some Other Term</dt>
<dd>Definition 1</dd>
<dd>Definition 2</dd>
</dl>
<p>
Here is the same code with a fix applied. All backgrounds present and correct!
(read on for the fix)
</p>
</div>
</div>
现在很明显,这个bug并不常见,它在你给一个浮动元素设置了相对定位时才出现。但有时我们是因为有需要才这样设置,大多数情况是有绝对定位的元素时,修复其他IE BUG。好吧,就算它是常见的情况吧!
这个BUG有时比上面的例子还奇怪,非常奇怪!例如;list的顺序和list的类型会影响背景显示的方式。把一个 <dl> 放在一个 <ul> 后面时,背景会显示,但是如果放在前面就不显示;仅仅第一个 <dt> 显示。如果背景是设置在 <dd> 上的,它们总会显示。
当 scroll 和 window painting 时会出现一些其他奇怪的事情。当scroll或改变窗口时,背景色会重新绘制。我做了个简单的例子 scroll/window painting example 。
当 window dragging 时,背景图片和背景色都会 "painted" ,这和 list background problem 是一样的。
怎么修复它?
好消息是消除这个bug是小事一桩。把下面的代码放到你的样式表里面,你就再也不会为 list 背景消失痛苦了。
ul, ol, dl {position: relative;}
另外一个方法是把受影响的 list 放到一个相对定位的 <div> 里面,但这会增加一些额外的无语义的标记 (mark-up) ,最好使用第一种方法。
其他一些不算完美的解决方式:
1.list本身也浮动。
2.在list上声明 display: inline; (Works on <dl>s)
3.给lists设置尺寸,或者应用 Zoom Fix.
4.在第一个消失的元素前放置一个 comment tag 也可以修复它,但是后面的 list 依然会存在问题。
总结
处理起来这确实是一个奇怪并且烦人的bug。它花了一番功夫确定这个错误怎么发生和怎么解决它。这个bug最大的问题是它很多变。在它们显示的时候,lists的顺序和其他元素怎么放置会产生很小但是能注意得到的影响。
但是尽管这个 bug 很多变,它很容易修复,只要声明 position: relative 就可以了。所有受影响的 lists 你都可以这样处理。
原文地址: