The IE/Win Disappearing List-Background Bug

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 你都可以这样处理。

原文地址：

http://positioniseverything.net/explorer/ie-listbug.html