【ie6】网页排版应该考虑ie6的兼容性问题-pg电玩城

网页排版应该考虑ie6的兼容性问题

ie6占据百分之40多。虽然浏览器的种类很多，光一个ie就有ie5.5,ie6,ie7,ie8等多版本，在这众多的高版本中，ie6依然受大多数用户所喜欢，所以排版时候就不的不去考虑ie6的兼容问题，要不然会损失很多访问者。 

下面列举ie6中10个不得不注意的问题：

1. 使用 doctype

你需要在html页面的最顶部加上doctype类型，当然， strict版是值得推荐的，例如： 

"http://www.w3.org/tr/html4/strict.dtd"> 

或者, xhtml页面的!doctype： 

"http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> 

你最不想看到的是，ie6进入怪癖模式 – 其实已经够多怪癖了。 

2. 设置position: relative

设置position:relative解决了不止一个问题，特别当需要设置对齐的时候。很明显，你需要明白的一点是，绝对定位是相对来说的。说不定，因为你没有设置，而不知道东西都飞到那去了。比如，你设计了每篇文章前都有一张图片，最后，你发现，只有一张图片在页面上，或许，是他们重叠了。 

3. 给浮动元素设置 display:inline 值

这源于著名的ie6双倍外边距bug，例如，你给一个div设计了浮动，并且，设置了margin-left:5px;，在ie6中很可能就是margin-left:10px了，这里，给浮动元素设置 display:inline；，即可解决问题。 

4. 为元素设置 haslayout

很多ie6（或ie7）的问题可以用设置haslayout值的方法来解决。（如果你不知道haslayout是什么，请看这里） 

最简单的给元素设置haslayout值的方法是给加上css 的height或width(当然，zoom也可以用，但这不是css的一部分)。设置一个具体的值是推荐的，但有时候并不一定知道高度多少，这里，你可能会用到height:1%。如果父元素没有设置高度，那么元素的物理高度并不会改变，但是，已经具备haslayout属性。 

5. 解决字符重复出现的问题

复杂的布局可能导致一些浮动元素里面的文字，出现在清理浮动位置的下面。这是一个奇怪的问题，下面这此可以帮你解决： 

?确保浮动元素设置了 display:inline;

?在浮动元素中使用 margin-right:-3px;

?在浮动元素的最后一个元素后加上一个ie注释，例如： 

?在最后的元素中加上一个div(这以设置width 为90% 或者其他相似的高度)

update: 最简单的方法是删除掉所有注释。（感谢恬玮儿的提示，我自己并没有遇到过，不过，google了一下，发现这个方法也可以解决，并且，这是值得推荐的一个方法。） 

你可以到positioniseverything.net中查看更多关于这个的解释。 

6. 只在