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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值