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

所属分类: 网页制作 / HTML/Xhtml 阅读数: 1881
收藏 0 赞 0 分享

下图是本站统计系统中访客详情中浏览器查看率,IE6占据百分之40多。虽然浏览器的种类很多,光一个IE就有IE5.5,IE6,IE7,IE8等多版本,在这众多的高版本中,IE6依然受大多数用户所喜欢,所以排版时候就不的不去考虑IE6的兼容问题,要不然会损失很多访问者。

下面列举IE6中10个不得不注意的问题:

1. 使用 DOCTYPE
你需要在HTML页面的最顶部加上DOCTYPE类型,当然, strict版是值得推荐的,例如:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">


或者, XHTML页面的!DOCTYPE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"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注释,例如: <!--[if !IE]>把你的注释放这里… <![endif]-->
•在最后的元素中加上一个DIV(这以设置width 为90% 或者其他相似的高度)
UPDATE: 最简单的方法是删除掉所有注释。(感谢恬玮儿的提示,我自己并没有遇到过,不过,google了一下,发现这个方法也可以解决,并且,这是值得推荐的一个方法。)

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

6.只在<a>标签中使用hover,IE6只支持<a>标签显示hover样式
当然,你还是可以通过JS来解决这个方法。但是, 这关于到可访问性的问题。建议不要把重要的内容设置在利用JS来实现的hover中。

7. 使用!important 或高级选择器来区分IE浏览器
比如min-height可以避免使用CSS来实现对IE的兼容。

#element {
min-height: 20em;
height: auto !important;
height: 20em; /* 让IE6显示这个高度 */
}

IE6 并不能正确地识别min-height,可以设置固定的高度,让IE6解析为20em。即使如此,它还是会因为内容的尺寸扩大而改变高度。而另一个方法是使用高级选择器:

#element {
min-height: 20em;
height: 20em;
}
/* 忽略 IE6 */
#element[id] {
height: auto;
}

8. 避免按比例确定的尺寸
比例会让IE6变得错乱,除非你给父元素添加一个确切的高度。不然,给其他的加上!important,例如:

body{
margin: 2% 0 !important;
margin: 20px 0; /* IE6 可读 */
}

9. 尽早测试,经常测试
别忘记尽早测试,经常测试, 除非你的程度已经完成。不然,你可能花更多的时间来解决IE6的问题。一般情况下,如果你的网站能在IE6和firefox下良好表现,估计其他浏览器就不会有什么大问题了。

10. 重构你的代码
很多情况下,解决一个问题,可能比重构你的代码要花更多的时间。

更多精彩内容其他人还在看

HTML常用标签大全及html标签的特点

本篇文章给大家整理些关于html常用标签大全及html标签的特点,希望对大家学习html相关知识有所帮助,感兴趣的朋友一起学习吧
收藏 0 赞 0 分享

HTML页面3秒后自动跳转的三种常见方法

在项目中,我们经常会遇到这样一个功能:如何实现页面N秒后自动跳转。其实方法很简单,下面小编通过本文给大家分享HTML页面3秒后自动跳转的三种常见方法,对html页面3秒后自动跳转的相关知识感兴趣的朋友一起学习吧
收藏 0 赞 0 分享

HTML实现页面自动跳转的五种方法

本文通过五个实例给大家介绍html实现页面自动跳转的五种方法,对html页面跳转相关知识感兴趣的朋友一起学习吧
收藏 0 赞 0 分享

举例讲解HTML中META标签的一些使用技巧

这篇文章主要介绍了HTML中META标签的一些使用技巧,共举了10个小例子,HTML5中META标签也有演进,可以说是HTML学习中的重要知识点,需要的朋友可以参考下
收藏 0 赞 0 分享

dns-prefetch是什么 前端优化:DNS预解析提升页面速度

在网页体验中我们常会遇到这种情况,即在调用百度联盟、谷歌联盟以及当前网页所在域名外的域名文件时会遇到请求延时非常严重的情况。那么有没有方法去解决这种请求严重延时的现象呢
收藏 0 赞 0 分享

HTML初学者适用的十五条最佳实践

这篇文章主要为HTML初学者推荐了适用的三十条最佳实践,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

深入解析HTML的table表格标签与相关的换行问题

这篇文章主要介绍了HTML的table表格标签与相关的换行问题,文中给出了强制换行和强制不换行的解决方案,需要的朋友可以参考下
收藏 0 赞 0 分享

HTML代码书写规范指南

这篇文章主要介绍了HTML代码书写规范指南,包括对格式和字符编码以及注释等方面的一些普遍约定俗成的约束,需要的朋友可以参考下
收藏 0 赞 0 分享

利用iframe在网页中显示天气附效果截图

这篇文章主要介绍了利用iframe在网页中显示天气,这个功能还是比较实用的,实现起来也比较容易,需要的朋友可以看看
收藏 0 赞 0 分享

HTML 中的 dl(dt,dd)、ul(li)、ol(li) 使用方法

这篇文章主要介绍了HTML 中的 dl(dt,dd)、ul(li)、ol(li) 使用方法,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多