网页排版应该考虑IE6的兼容性问题.docxVIP

网页排版应该考虑IE6的兼容性问题 下图是本站统计系统中访客详情中浏览器查看率，IE6 占据百分之40多。虽然浏览器的种类很多，光一个IE就 有IE5. 5, IE6, IE7, IE8等多版本，在这众多的高版本中， IE6依然受大多数用户所喜欢，所以排版时候就不的不去考 虑IE6的兼容问题，要不然会损失很多访问者。 下面列举IE6中10个不得不注意的问题： 1 ?使用 DOCTYPE 你需要在HTML页面的最顶部加上DOCTY PE类型，当然, strict版是值得推荐的，例如： It; !D0 CTYPEIITMLPU BLIC〃-//W3C //DTDHTML4. 01//EN〃 〃h ttp://www. w 3. org/TR/ht ml4/strict? dtd〃gt; 或者,X HTML页面的！ DOC TYPE： It; ! DOCTYPEhtml PUBLIC〃-//W 3C//DTDXHTM L1.0Strict//ENz/ 〃http ://www. w3.o rg/TR/xhtml 1/DTD/xhtml 1- strict. dt d〃gt; 你最不想看到的是，IE6进入怪癖模式-其实已经够多 怪癖了。 设置 po sition::rela tive 设置pos ition:relat ive解决了不止一个问题，特别 当需要设置对齐的时候。很明显，你需要明白的一点是， 绝对定位是相对来说的。说不定，因为你没有设置，而不 知道东西都飞到那去了。比如，你设计了每篇文章前都有 一张图片，最后，你发现，只有一张图片在页面上，或许, 是他们重叠了。 给浮动元素设置display: i nline值 这源于著名的IE6双倍外边距BUG,例如，你给一个 DIV设计了浮动，并且，设置了 margin-left :5px;,在IE6 中很可能就是ma rgin-left: 1 Opx 了，这里，给浮动元素 设置display : inline；,即可解决问题。 为元素设置hasLayout 很多IE6 （或IE7 ）的问题可以用设置ha sLayout值 的方法来解决。（如果你不知道hasLayout是什么，请看这 里） 最简单的给元素设置hasL ayout值的方法是给加上 CSS的heigh t或width（当然，zoom也可以用，但这不是 CSS的一部分）。设置一个具体的值是推荐的，但有时候并 不一定知道高度多少，这里，你可能会用到height: 1%0如 果父元素没有设置高度，那么元素的物理高度并不会改变, 但是，已经具备hasLayo ut属性。 解决字符重复出现的问题 复杂的布局可能导致一些浮动元素里面的文字，岀现 在清理浮动位置的下面。这是一个奇怪的问题，下面这此 可以帮你解决： #8226;确保浮动元素设置了 display : inline; #8226;在浮动元素中使用margin-ri ght ：-3px; #8226;在浮动元素的最后一个元素后加上一个IE注释, 例如：It -[if!IE]航；把你的注释放这里… It; ! [endif ]--gt; #82 26;在最后的元素中加上一个DIV（这以设置width 为90%或者其他相似的高度） U PDATE:最简单的方法是删除掉所有注释。（感谢恬玮 儿的提示，我自己并没有遇到过，不过，google 了一下， 发现这个方法也可以解决，并且，这是值得推荐的一个方 法。） 你可以到positionise verything. n et中查看更多关于 这个的解释。 只在1 t;agt;标签中使用hover, IE6只支持It;agt; 标签显示hover样式 当然，你还是可以通过JS来解决这个方法。但是，这 关于到可访问性的问题。建议不要把重要的内容设置在利 用JS来实现的hover中。 使用! importan t或高级选择器来区分I E浏览器 比如min -height可以避免使用CSS来实现对IE的兼 容。 ttelemen t { min-heigh t :20em; he ight: auto! i mportant; height :20em ;/*让IE6显示这个高度*/ } IE6并不能正确地识别min-height,可以设置固定的 高度，让IE6解析为20emo即使如此，它还是会因为内容 的尺寸扩大而改变高度。而另一个方法是使用高级选择器: ttelement{ min-height:20em; height :20em; } /* 忽略 IE6*/ tteleme nt [id] { heig ht: auto; } 8?避免按比例确定的尺寸 比例会让IE6变得错乱，除非你给父元素添加一个确 切的高度。不然，给其他的加上！ im