网站重构中ie6常见bug解决办法

1. 强制浏览器是用Web标准解析
译文出自:http://www.1x3x.net/blog/web-design/2009/03/10-fixes-for-ie6-problems.html

HTML的写法

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

或者XHTML的写法

1
2
 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
 

2. Set Position: relative
给元素指定Position: relative能够解决很多奇怪的问题,比如对齐和显示不正确等。对于Position的属性要小心设置,特别是设为absolute。

3. 给Float的元素加上inline属性避免双倍margin
这大概是最著名的一个bug了,IE6下对于浮动元素,会莫名其妙的双倍空白边,解决的方法也很莫名,设上display:inline属性就好了,对于float元素这个属性本身没有任何意义。 (双边距bug)

4. 给特定元素加上hasLayout属性
很多IE6(甚至是IE7)的问题可以通过设置hasLayout这个ie only的内部属性来解决,比如让a这样的行级元素变成块级元素或者让元素应用透明效果。但这个属性并不能直接设置。最简单的让元素拥有hasLayout属性的方法是显式的为其设置高度或者宽度。有的时候,你不能显示的为其设定高度,可以使用设置高度为1%,而其父元素如果没有确定的高度时,该设置不会被应用到实际的高度上,但是hasLayout会被激活。

5. Fix字符重复bug
这是IE6上面一个非常奇怪的BUG,他的触发条件也是相当诡异,在浮动元素间如果有
<!– comment –> <!– comment –> <!– comment –>
这样的普通的HTML注释的话,会导致Float元素中的最后的字符会很诡异的出现在后面的clear元素中,具体的介绍大家可以看这里 positioniseverything 。

解决的方法也很奇怪
* 将所有的浮动元素设为 display:inline;
* 给最后的浮动元素设置 margin-right:-3px;
* 使用条件注释避免IE6下的问题 <!–[if !IE]>Put your commentary in here…<![endif]–>
* 在最后的容器内放入一个空的div (这种添加这种无语义的workaround并不是最理想的选择)

6. 需要悬浮效果的地方,尽量使用<a>标签
IE6中只能对<a>应用css hover效果,所以尽可能使用<a>标签来获取最大的兼容性。

7. 使用!important或者高级选择器来兼容IE6
使用!important和高级选择器来兼容IE6,可以避免使用那些通不过校验的非常规hack,比如所谓的_width这样的东西。我们来看个简单的例子。

1
2
3
4
5
 #element {
 min-height: 20em;
 height: auto !important; /* understood by all browsers */
 height: 20em; /* IE6 incorrectly uses this value /*
}
 

IE6是不能正确解读!important这个修饰符的,所以他会错误的使用height:20em这个属性来实现最小高度。(IE6下容器会自动扩展)

1
2
3
4
5
6
7
8
9
 #element {
 min-height: 20em;
 height: 20em;
}
 
/* ignored by IE6 */
#element[id] {
  height: auto;
}
 

或者使用高级选择器,同样也能实现该目的,这样代码既能保持合法性,也能很好的去兼容IE6这个诡异的产品。

8. 避免在IE6下使用百分比尺寸
1
2
3
4
 body {
 margin: 2% 0 !important;
 margin: 20px 0; /* IE6 only */
}
 

在IE6下是用百分比的尺寸是件非常让人头疼的事情,尽可能避免这样的使用,而是采用结合!important和精确尺寸来明确元素的大小。

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

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

阅读 3,510 评论 0 阅读全文

发表评论

记录工作生活点滴。

返回
顶部