探究IE6的几个奇怪的问题（一）

Artcss — Thu, 24 Sep 2009 15:49:23 +0000

前两天在做页面时发现了一个奇怪的问题，就是IE6在写列表时，如果给ul定了padding-top值以后，当li换到下一行时，ul上的padding-top值就会在第二行的li上生效，一开始我还以为在IE6中li继承了ul的padding之呢，但是不应该呀！

可能文字表达不好，直接上例子和截图吧。

问题的出现：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="artskin@163.com,guliqiang" /> <meta name="Copyright" content="版权所有未经授权不得复制或建立镜像" /> <meta name="Keywords" content="前端思考" /> <meta content="all" name="robots" /> <title>浏览器兼容测试 || 前端思考</title> <style>  </style> </head> <body> <div class="box"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </body> </html>

提示：你可以先修改部分代码再运行。

这段代码在Firefox3和IE8里边显示正常，是这样的：

但在IE6下边却是这样：

ie7不会撑开父级高度，这样显示：

经过多方打听，终于找到了解决方法，这里IE6的两个问题：

一、是双倍边距，这个大家都很熟悉，用display:inline就可以解决；

二、另一个padding-top是经一个网名叫“糖糖”的网友提醒，加了zoom:1解决的，应该是IE的hasLayout Bug

下面是最佳解决方案：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="artskin@163.com,guliqiang" /> <meta name="Copyright" content="版权所有未经授权不得复制或建立镜像" /> <meta name="Keywords" content="前端思考" /> <meta content="all" name="robots" /> <title>浏览器兼容测试 || 前端思考</title> <style>  </style> </head> <body> <div class="box"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </body> </html>

提示：你可以先修改部分代码再运行。

最后终于解决了，哈哈，大家也可以这样试试！

前端思考：专注前端开发，关注用户体验 » css兼容

探究IE6的几个奇怪的问题（一）

问题的出现：

下面是最佳解决方案：