IE6 最常10种修复bug方法

最新推荐文章于 2024-01-08 15:20:42 发布

ava_chc

最新推荐文章于 2024-01-08 15:20:42 发布

阅读量232

点赞数

CC 4.0 BY-SA版权

文章标签： IE CSS 编程浏览器 Firebug

本文链接：https://blog.youkuaiyun.com/ava_chc/article/details/83917728

本文提供了针对IE6浏览器的一系列兼容性解决方案，包括强制使用Web标准解析、解决浮动元素问题、修复字符重复bug等，同时介绍了如何使用!important和高级选择器来确保样式正确呈现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 强制浏览器是用Web标准解析

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">

2. Set Position: relative

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

3. 给Float的元素加上inline属性避免双倍margin

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

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这样的东西。我们来看个简单的例子。

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

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

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

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

针对各版本IE和FF的css hack

    
     #element{ 
    
     /*顺序是FF&IE8,IE7,IE6 不能颠倒！*/
    
     color:red /* 只对FF*/
    
     color:/*\**/black\9 /*只对IE8有效**/
    
     *color:gray/*只对IE7有效*/
    
     _color:blue /*只对IE6有效*/
    
     }

8. 避免在IE6下使用百分比尺寸

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

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

9. 频繁测试，尽早测试

和其他编程一样，现在编程提倡持续测试，尽早测试，甚至可以测试驱动，在CSS开发过程中也要尽可能的频繁测试，可以参看我之前介绍的一些测试工具。

IE: IE developer toolbar, debug bar ,IETester(ie5-8)
FF: firebug

10. 重构你的代码

在任何浏览器中，需要获得鼠标hover效果，都建议尽量采用A标签，可以先将A标签强制转化为block块级元素（display:block），然后就可以为其设定宽度和高度，但是它也具有了块级元素自动换行的属性，所以麻烦的是如果要其横排还要为其指定float:left，并且在应用完成后及时的清除浮动，这样就可以得到<div οnclick="">或者<li οnclick="">效果，而且获得了最大兼容性。在任何浏览器中，需要获得鼠标hover效果，都建议尽量采用A标签，可以先将A标签强制转化为block块级元素（display:block），然后就可以为其设定宽度和高度，但是它也具有了块级元素自动换行的属性，所以麻烦的是如果要其横排还要为其指定float:left，并且在应用完成后及时的清除浮动，这样就可以得到<div οnclick="">或者<li οnclick="">效果，而且获得了最大兼容性。