十个修复IE6下bug技巧

IE6的末日即将来临，但这个末日也并非朝日可至,所以我们还是争取最后的胜利，用各种hack和方法来规避IE6下双边距，背景透明，重复文字等等一堆bug。

10个修复IE6下bug技巧

IE6的末日即将来临，对我们前端开发人员来说,无疑是一个慰藉人心的喜讯。但这个末日也并非朝日可至,所以我们还是争取最后的胜利,用各种hack和方法来规避IE6下双边距,背景透明,重复文字等等一堆bug.下面是转载自前端观察中的10个修复IE6下bug技巧:

1.使用DOCTYPE

你应该在一直每个HTML文件的头部都使用DOCTYPE，并且我们推荐使用strict版本，比如：

  1. <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> 

或者，对于XHTML使用:

  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

你需要处理的最棘手的事情就是IE6进入quirks模式——它已经够诡异了。

2.设置position:relative

将一个元素设置为”position:relative”可以解决很多问题，特别是你曾经遇到隐藏的或对齐诡异的盒子。显然，你需要非常小心点儿，因为绝对定位的子节点可能会因此重新定位。

3.将浮动元素设置为display:inline

具有margin属性的浮动元素可能引起著名的IE6双倍margin问题，比如，你为一个元素指定margin-left为5px，但是IE6中实际上却表现为10px。”display:inline”将解决这个问题，尽管这不是必须的，你的CSS仍然是有效的。

4.将一个元素设置为hasLayout

很多IE6(和IE7)的渲染问题可以通过设置元素的hasLayout来解决。这是一个IE内部属性（IE隐藏的，更多关于haslayout的资料，可以参阅这里），用来确定相对于其他元素，内容是如何布局和定位的。如果你需要设置一个inline元素(比如一个链接)为block元素，或者是应用透明效果，设置hasLayout也可能是必须的。
最简单的设置hasLayout的方法是为CSS设置一个高度或宽度（zoom也可以用，但是zoom并不是CSS标准的一部分）。我们推荐设置实际尺寸，但是问题是这是不现实的，你可能需要使用”height:1%”。如果父元素并没有设置高度，该元素的实际高度并不受影响，而且这个时候hasLayout已经被启用。

5.修正重复文字bug

复杂的布局可以触发在浮动元素的最后一些字符可能出现在出现在清除元素下面的bug。这里有几个解决方法，有些是完美的，但是做一些反复试验也是必须的：
.确保所有的元素使用”display:inline;”
.在最后一个元素上使用一个”margin-right:-3px;”
.为浮动元素的最后一个条目使用一个条件注释，比如：

  1. <!--[if!IE]>Putyourcommentaryinhere...<![endif]--> 

.在容器的最后元素使用一个空的div(它也有必要设置宽度为90%或类似宽度。
>>>>>>你还可以访问positioniseverything.net查看该问题的完整介绍。

6.在可点击和悬停的元素上只使用<a>标签

IE6只认识对a标签的CSShover效果。
你也可以在基于JavaScript的组件内使用他们来控制，以使他们保持键盘的可操作性。是有一些可替代的选择，但是<a>标签比其它方案更可靠。

7.使用!important或高级选择器来区分IE6

不使用传统Hack或在额外文件中的条件CSS的方法，写出特别针对IE6的可行的代码也还是有可能的。比如最小高度可以通过这段代码来定义：

  1. #element{  
  2. min-height:20em;  
  3. height:auto!important;/*所有浏览器都理解这段代码*/  
  4. height:20em;/*IE6错误的使用这个值/*  
  5. } 

IE6不理解min-height并错误的用20em覆盖”auto”高度，但是，如果内容需要更多的空间的话，它会自动增加高度。
另外一个可选的方法是使用高级选择器，比如e.g.

  1. #element{  
  2. min-height:20em;  
  3. height:20em;  
  4. }  
  5. /*IE6无视下面的代码*/  
  6. #element[id]{  
  7. height:auto;  
  8. } 

8.避免百分比单位

百分比会把IE搞糊涂的。除非你可以确切的控制每一个父元素的大小，才可能做到最佳预防。你可以通过!important在其他浏览器中继续使用百分比，比如：

  1. body{  
  2. margin:2%0!important;  
  3. margin:20px0;/*IE6only*/  
  4. } 

9.尽早测试并不断测试

不要等到你的网站或应用完成了才测试IE6;这样的话问题可能更糟糕，而且会花更多时间来修正。如果你的网站能够在Firefox和IE6中正常运行，那么一般在其它浏览器就不会有问题。

10.重构你的代码

经常发生的事情是，修正bug要比重新考虑一个布局问题要花更长的时间。对HTML做些小改动和一些简单的CSS常常更有效。这可能意味着你要放弃完美的代码，但是会出现较少的长期问题而且将来你会很清楚如果处理这些可能出现的问题。

posted @ 2012-06-28 18:01  猫200  阅读(128)  评论(0)  编辑  收藏  举报