[转贴]IE6出现BUG的十种常见解决方法

IE8都发布了，而且也很好用，但是从市场占有率分析还是有N多人喜欢用可恶的IE6，所以不得以，我们还是得在各个版本的IE以及非IE的浏览器之间继续折腾，如果你遇到了IE6的奇怪问题，请参考以下的解决办法：

原文:http://hi.baidu.com/wely_ton/blog/item/3903a1394602cccad56225ed.html

以下介绍的十种解决方法是针对IE6经常会出现的DIV+CSS布局BUG而使用的一些默认设置，由于IE6的BUG比较多，所以我们制作页面时经常会碰到一些莫名其妙的布局问题，每次碰到问题我们就会查找对因的页面位置与CSS，使用以下解决方法就可以避免一些常见的IE6的BUG问题。

虽然说IE8已经来了，并且表现不错。8个小时突破1200W下载，远远地超过24小时下载800W的firefox。但对于整个互联网，IE6仍然是用户最多的浏览器。暂不说IE6怎样，把Web的表现做得更好，既是一种责任，也是一种能力的表现。如果你依然对IE6所出现的种种问题无可奈何，就让我带你来看一下来自SitePoint的 10 Fixes That Solve IE6 Problems，学会这10个方法，你将可以解决大部分IE6出现的问题。

ie6

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% 或者其他相似的高度，或者什么都不加仅仅一个空的div就可以)
  • 如果上述办法都不行，尝试给父级元素加上style='float:none'去掉浮动试试
  • 删除所有注释也是一个不错的办法
  • 有时候某些display:none的元素也会导致这种错误
  • 把元素移动一下位置(比如一些动态弹出的ajax层)，有时候也能凑效

你可以到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. 重构你的代码

很多情况下，解决一个问题，可能比重构你的代码要花更多的时间。比如上一次给公司写一个频道页面的，没有一边制作，一边测试IE6的表现，导致最近有很多奇怪的问题，因为布局比较复杂。后来，干脆重构代码。用了2天。我想，如果是想解决方法，或许2天都搞不定。

posted @ 2009-05-08 13:14  菩提树下的杨过  阅读(661)  评论(0)  编辑  收藏  举报