最近想改进一下网站的功能，于是又和IE斗上了。IE的CSS渲染有些地方实在怪异了，真想不出如何可以去解释。我放个例子大家来看看，估计应该都是属于已经被研究的很透的问题了，不过我没空去深究了，有知道怎么回事的也请介绍一下，先谢了。
这里有3个小测试，第1个和第2个几乎一样，除了第二个中的div画了一个border-top，但在IE中(IE6/IE7)，两个排版截然不同，firefox和opera中border则不影响排版结构。没想通为什么IE中border和排版会有关系。第3个测试中的字样只能在IE(IE6/IE7)中看到，IE对style文件的解释和其他的浏览器也不一样。这个小问题应该可以用来区分IE。
<html>
<head>
<title>A Bug of IE?</title>
<style type="text/css">
body { width:50%; }
img { float:right; clear:right; }
#test1, #test2, #test3 { clear:both; padding:10px; border:2px dotted red; }
#test2 div { border-top:1px solid black; }
#test3 { display:none; }
#test3, { display:block; }
</style>
</head>
<body>
<div id="test1">
<img src="dog_165.png" />
<div>
<img src="dog_165.png" />
test test test test test test test test test test
</div>
</div>
<div id="test2">
<img src="dog_165.png" />
<div>
<img src="dog_165.png" />
test test test test test test test test test test
</div>
</div>
<div id="test3">
Only visiable in IE?
</div>
</body>
</html>
点击这里看演示这里有3个小测试，第1个和第2个几乎一样，除了第二个中的div画了一个border-top，但在IE中(IE6/IE7)，两个排版截然不同，firefox和opera中border则不影响排版结构。没想通为什么IE中border和排版会有关系。第3个测试中的字样只能在IE(IE6/IE7)中看到，IE对style文件的解释和其他的浏览器也不一样。这个小问题应该可以用来区分IE。
2009/01/16
又发现一个IE6的问题，如果css的某个属性用了expression(...)，那么对它的!important修饰就不起作用了。- labrador's blog
- 7314 次点击
发表新评论