常见的浏览器兼容性问题大汇总

心已赠人 2021-06-26 16:06 699阅读 0赞

**1 ie6.0横向`margin`加倍**

产生因素：块属性、float、有横向margin。
    解决方法：display：inline；

**2 ie6.0下默认有行高**

解决方法：overflow:hidden;或font-size:0;或line-height：xx px；

**3 在各个浏览器下`img`有空隙(原因是：回车。)**

解决方法:让图片浮动。

**4 一个父标签与几个子标签嵌套，父标签不浮动，子标签`float`，子标签不撑开父的高度。**

解决方法：
    a 在子标签最后清浮动{<div style="height:0;clear:both;"> </div>}
    b 父标签添加{overflow：hidden；}
    c 给父标签设置高度

**5 Ie6下，不识别最大宽、高度和最小宽高度，意即`min-width/height`和 `Max-width/height`在`ie6`中没效果，**

解决方法：  
(1)：

.abc{ border:1px blue solid;width:200px;height:200px;}
    html>body .abc{ width:auto;height:auto;min-width:200px;min-height:200px;}

(2)：

.abc{ width:200px;height:200px;_width:200px;_height:200px;}

（因为ie6有一个特征，当定义一个高度时，如果内容超过高度，元素会自动调整高度。）

**6 Ie6里面：如`li`设宽、高，并且`li`里面的标签浮动，那么`li`之间会有间距**

解决方法：li不设宽、高或者li内的标签不浮动

**7 li之间有间距**

解决方法：li 设置vertical-align:middle;

**8 3像素问题：ie6下，当浮动元素与流动元素并列显示时，他们之间会存在三像素问题。**

解决方法：用hack技术， 例如：所有浏览器通用 height:100px; 
                                                      ie6专用_height:100px;
                                                      ie7专用*+height:100px; 
                                                      ie6/ie7共用*height:100px;

**9 当定义行内元素为包含框时，且包含框包含的绝对定位元素以百分比为单位进行定位时，会出现混乱。**

解决方法：在行内元素里加入{zoom：1；}

**10 当多个浮动元素中间夹杂着`HTML`注释语句时，如果浮动元素宽度为100%，则在下一行多显示一个上一行最后一个字符。**

解决办法：给浮动元素添加display:inline;。

**11 `opacity` 定义元素的不透明度**

filter：alpha（opacity=80）；/*ie支持该属性*/
    opacity：0.8；/*支持css3的浏览器*/

**12 两个块元素，竖向的`margin`值不增加，会重叠，其间距为最大`margin`值。**

**13 优先级：被`!important` 注明的`css`属性具有最高优先级(`.abc{color:red !important;}`)。但在ie6中`!important`具有一个`bug:`在同一组`css`属性中，`!important`不起作用。**

**14 火狐不识别`background-position-y` 或`background-position-x`;**

\---------------------------2014.01.10补充-------------------------------

**15 ie6 不支持 `fixed`**

/*对于非IE6可以这样写*/
    #top{   
        position:fixed;  
        bottom:0;  
        right:20px;  
    }  
    
    /*但是IE6是不支持fixed定位的，需要另外重写*/
    #top{   
        position:fixed;  
        _position:absolute;  
        top:0;  
        right:20px;  
        _bottom:auto;  
        _top:expression(eval(document.documentElement.scrollTop));
    }  
    
    /*使用hack使IE6实现该效果，但这个东东会闪烁，需要以下代码*/
    *html{   
        background-image:url(about:blank);  
        background-attachment:fixed;  
    }  
    
    /*使固定在顶部*/
    #top{   
        _position:absolute;  
        _bottom:auto;  
        _top:expression(eval(document.documentElement.scrollTop));  
    }  
    
    /*固定在底部*/
    #top{   
        _position:absolute;  
        _bottom:auto;  
        _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop)||0)-(parseInt(this.currentStyle.marginBottom)||0)));  
    }  
    /*垂直居中*/
    #top{ 
        position:fixed;
        top:50%;
        margin-top:-50px;
        _position:absolute;
        _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight/2)); 
    }

**16 解决 ie6 最大、最小宽高 `hack`方法**

/* 最小宽度 */
    .min_width{ 
        min-width:300px;
        _width:expression(parseInt(this.clientWidth) < 300 ? "300px" : this.clientWidth);
    }
    
    /* 最大宽度 */
    .max_width{ 
       max-width:600px;
       _width:expression(parseInt(this.clientWidth) > 600 ? "600px" : this.clientWidth);
    }
    
    /* 最小高度 */
    .min_height{ 
       min-height:200px;
       _height:expression(parseInt(this.clientHeight) < 200 ? "200px" : this.clientHeight);
    }
    
    /* 最大高度 */
    .max_height{ 
       max-height:400px;
       _height:expression(parseInt(this.clientHeight) > 400 ? "400px" : this.clientHeight);
    }

**17 `z-index`不起作用的 `bug`**

1）ie6下 首先讲讲第一种`z-index`无论设置多高都不起作用情况。这种情况发生的条件有三个：  
1、父标签`position`属性为`relative`；  
2、问题标签含有浮动(float)属性。

2）所有浏览器：它只认第一个爸爸  
层级的高低不仅要看自己，还要看自己的老爸这个后台是否够硬。用术语具体描述为：  
父标签`position`属性为`relative`或`absolute`时，子标签的`absolute`属性是相对于父标签而言的。而在IE6下，层级的表现有时候不是看子标签的`z-index`多高，而要看它们的父标签的`z-index`谁高谁低。

**18 ie各个版本`hack`**

/*类内部hack：*/
        .header { _width:100px;}            /* IE6专用*/
        .header { *+width:100px;}        /* IE7专用*/
        .header { *width:100px;}            /* IE6、IE7共用*/
        .header { width:100px\0;}        /* IE8、IE9共用*/
        .header { width:100px\9;}        /* IE6、IE7、IE8、IE9共用*/
        .header { width:330px\9\0;}    /* IE9专用*/
    
    /*选择器Hack：*/
        *html .header{ }        /*IE6*/ 
        *+html .header{ }    /*IE7*/

## Ø JavaScript ##

1.  HTML对象获取问题
2.  const问题
3.  event.x与event.y问题
4.  window.location.href问题
5.  frame问题
6.  模态和非模态窗口问题
7.  firefox与IE的父元素(parentElement)的区别
8.  document.formName.item(”itemName”) 问题
9.  集合类对象问题
10. 自定义属性问题
11. input.type属性问题
12. event.srcElement问题
13. body载入问题
14. 事件委托方法
15. Table操作问题
16. 对象宽高赋值问题

## Ø CSS ##

1.  `cursor:hand` VS `cursor:pointer`
2.  `innerText`在IE中能正常工作，但在FireFox中却不行.
3.  CSS透明
4.  css中的width和padding
5.  FF和IE BOX模型解释不一致导致相差2px
6.  IE5 和IE6的BOX解释不一致
7.  ul和ol列表缩进问题
8.  元素水平居中问题
9.  Div的垂直居中问题
10. margin加倍的问题
11. IE与宽度和高度的问题
12. 页面的最小宽度
13. DIV浮动IE文本产生3象素的bug
14. IE捉迷藏的问题
15. float的div闭合;清除浮动;自适应高度
16. 高度不适应
17. IE6下图片下有空隙产生
18. 对齐文本与文本输入框
19. LI中内容超过长度后以省略号显示
20. 为什么web标准中IE无法设置滚动条颜色了
21. 为什么无法定义1px左右高度的容器
22. 链接(a标签)的边框与背景
23. 超链接访问过后hover样式就不出现的问题
24. FORM标签
25. 属性选择器(这个不能算是兼容,是隐藏css的一个bug)
26. 为什么FF下文本无法撑开容器的高度
27. 关于空格的解释
28. 条件注释
29. 强制渲染
30. js兼容文件
31. 浏览器识别符

## Ø JavaScript ##

1.  `HTML`对象获取问题

FireFox：document.getElementById("idName");
    ie:document.idname或者document.getElementById("idName").

解决办法：统一使用`document.getElementById("idName")`;

1.  `const`问题  
    说明:`Firefox`下,可以使用`const`关键字或`var`关键字来定义常量;  
    `IE`下,只能使用`var`关键字来定义常量.  
    解决方法：统一使用`var`关键字来定义常量.
2.  `event.x`与`event.y`问题  
    说明:IE下,`event`对象有x,y属性,但是没有`pageX,pageY`属性;  
    Firefox下,event对象有`pageX,pageY`属性,但是没有x,y属性.  
    解决方法：使用mX(`mX = event.x ? event.x : event.pageX;`)来代替IE下的`event.x`或者Firefox下的`event.pageX`.
3.  `window.location.href`问题  
    说明:IE或者`Firefox2.0.x`下,可以使用`window.location`或`window.location.href;`  
    `Firefox1.5.x`下,只能使用`window.location`.  
    解决方法：使用`window.location`来代替`window.location.href`.
4.  `frame`问题  
    以下面的`frame`为例：

(1)访问`frame`对象:  
IE:使用`window.frameId`或者`window.frameName`来访问这个`frame`对象. `frameId`和`frameName`可以同名。  
Firefox:只能使用`window.frameName`来访问这个`frame`对象.  
另外，在`IE`和`Firefox`中都可以使用`window.document.getElementById("frameId")`来访问这个`frame`对象.  
(2)切换`frame`内容:  
在 IE和`Firefox`中都可以使用`window.document.getElementById("testFrame").src = "xxx.html"`或`window.frameName.location = "xxx.html"`来切换`frame`的内容.  
如果需要将`frame`中的参数传回父窗口(注意不是`opener`,而是`parent frame`)，可以在`frame`中使用`parent`来访问父窗口。例如：`parent.document.form1.filename.value="Aqing"`;

1.  模态和非模态窗口问题  
    说明:`IE`下,可以通过`showModalDialog和showModelessDialog`打开模态和非模态窗口;Firefox下则不能.  
    解决方法：直接使用`window.open(pageURL,name,parameters)`方式打开新窗口。  
    如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用`window.opener`来访问父窗口.  
    例如：

var   parWin   =   window.opener;   
    parWin.document.getElementById("Aqing").value   =   "Aqing";

1.  `firefox`与IE的父元素(`parentElement`)的区别

IE：obj.parentElement
    firefox：obj.parentNode

解决方法: 因为`firefox`与`IE`都支持`DOM`,因此使用`obj.parentNode`是不错选择.

1.  `document.formName.item(”itemName”)` 问题  
    问题说明：IE下，可以使用`document.formName.item(”itemName”)` 或`document.formName.elements ["elementName"]`；Firefox 下，只能使用`document.formName.elements["elementName"]`。

解决方法：统一使用`document.formName.elements["elementName"]`。

1.  集合类对象问题  
    问题说明：`IE`下，可以使用 `()` 或 `[]` 获取集合类对象；Firefox下，只能使用`[ ]`获取集合类对象。  
    解决方法：统一使用 `[]` 获取集合类对象。
2.  自定义属性问题  
    问题说明：IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用`getAttribute()` 获取自定义属性；Firefox下，只能使用`getAttribute()` 获取自定义属性。  
    解决方法：统一通过`getAttribute()` 获取自定义属性。
3.  `input.type`属性问题  
    问题说明：IE下`input.type`属性为只读；但是Firefox下`input.type`属性为读写。  
    解决办法：不修改`input.type`属性。如果必须要修改，可以先隐藏原来的`input`，然后在同样的位置再插入一个新的`input`元素。
4.  `event.srcElement`问题  
    问题说明：IE下，`event`对象有`srcElement`属性，但是没有`target`属性；Firefox下，`even`对象有`target`属性，但是没有`srcElement`属性。  
    解决方法：使用`srcObj = event.srcElement ?event.srcElement : event.target`;  
    如果考虑第8条问题，就改用`myEvent`代替`event`即可。
5.  `body`载入问题  
    问题说明：Firefox的`body`对象在`body`标签没有被浏览器完全读入之前就存在；而IE的`body`对象则必须在`body`标签被浏览器完全读入之后才存在。  
    \[注\] 这个问题尚未实际验证，待验证后再来修改。  
    \[注\] 经验证，IE6、Opera9以及FireFox2中不存在上述问题，单纯的JS脚本可以访问在脚本之前已经载入的所有对象和元素，即使这个元素还没有载入完成。
6.  事件委托方法  
    问题说明：IE下，使用`document.body.onload = inject`; 其中`function inject()`在这之前已被实现；在Firefox下，使用`document.body.onload = inject()`;  
    解决方法：统一使用`document.body.onload=new Function(’inject()’);` 或者`document.body.onload = function(){}`  
    \[注意\] `Function`和`function`的区别。
7.  `Table`操作问题  
    问题说明：`ie、firefox`以及其它浏览器对于 `table` 标签的操作都各不相同，在ie中不允许对`table`和tr的`innerHTML`赋值，使用js增加一个tr时，使用`appendChild`方法也不管用。  
    解决方法：

//向table追加一个空行：
    var row = otable.insertRow(-1);var cell = document.createElement("td");cell.innerHTML = "";cell.className = "XXXX";row.appendChild(cell);

\[注\] 由于俺很少使用JS直接操作表格，这个问题没有遇见过。建议使用JS框架集来操作table，如JQuery。

1.  对象宽高赋值问题  
    问题说明：FireFox中类似`obj.style.height = imgObj.height`的语句无效。

## Ø CSS ##

1.  `cursor:hand` VS `cursor:pointer`  
    firefox不支持hand，但ie支持pointer  
    解决方法: 统一使用pointer
2.  `innerText`在IE中能正常工作，但在FireFox中却不行.  
    需用`textContent`。  
    解决方法:

if(navigator.appName.indexOf("Explorer")   >   -1){ 
            document.getElementById('element').innerText   =   "my text";
    }   else{ 
            document.getElementById('element').textContent   =   "my text";
    }

1.  `CSS`透明  
    IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。  
    FF：opacity:0.6。  
    opacity 透明，子元素会继承透明属性。解决方式：1、使用 background:rgba(0,0,0,.6) //IE8及以下无效果。 2、使用定位，背景色与子元素处于同级关系。
2.  css中的width和padding  
    在IE7和FF中width宽度不包括padding，在Ie6中包括padding.
3.  FF和IEBOX模型解释不一致导致相差2px  
    box.style\{width:100;border 1px;\}  
    ie理解为box.width = 100  
    ff理解为box.width = 100 + 1\*2 = 102 //加上边框2px

解决方法：`div{margin:30px!important;margin:28px;}`  
注意这两个margin的顺序一定不能写反， IE不能识别!important这个属性，但别的浏览器可以识别。所以在IE下其实解释成这样：div\{maring:30px;margin:28px\}  
重复定义的话按照最后一个来执行，所以不可以只写`margin:XXpx!important;`

1.  IE5 和IE6的BOX解释不一致  
    IE5下`div{width:300px;margin:0 10px 0 10px;}`  
    div 的宽度会被解释为300px-10px(右填充)-10px(左填充)，最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以 300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改 `div{width:300px!important;width :340px;margin:0 10px 0 10px}`
2.  `ul`和`ol`列表缩进问题  
    消除ul、ol等列表的缩进时，样式应写成：`list-style:none;margin:0px;padding:0px;`  
    经验证，在IE中，设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点，设置padding对样式没有影响；在 Firefox 中，设置margin:0px仅仅可以去除上下的空白，设置padding:0px后仅仅可以去掉左右缩进，还必须设置list- style:none才能去除列表编号或圆点。也就是说，在IE中仅仅设置margin:0px即可达到最终效果，而在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。
3.  元素水平居中问题  
    FF: margin:0 auto;

IE: 父级\{ text-align:center; \}

1.  `Div`的垂直居中问题  
    `vertical-align:middle;` 将行距增加到和整个DIV一样高：`line-height:200px;` 然后插入文字，就垂直居中了。缺点是要控制内容不要换行。
2.  `margin`加倍的问题  
    设置为`float`的div在ie下设置的`margin`会加倍。这是一个ie6都存在的`bug`。解决方案是在这个`div`里面加上`display:inline`;

例如：

<div id=”imfloat”>
    相应的css为
    #imfloat{ 
    float:left; 
    margin:5px; 
    display:inline;}

1.  IE与宽度和高度的问题  
    IE不认得`min-`这个定义，但实际上它把正常的`width`和`height`当作有`min`的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用`min-width`和`min-height`的话，`IE`下面根本等于没有设置宽度和高度。

比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：

#box{  width: 80px; height: 35px;}html>body #box{  width: auto; height: auto; min-width: 80px; min-height: 35px;}

1.  页面的最小宽度  
    如上一个问题，IE不识别`min`，要实现最小宽度，可用下面的方法：

#container{  min-width: 600px; width:expression(document.body.clientWidth＜ 600? "600px": "auto" );}

第一个`min-width`是正常的；但第2行的`width`使用了`Javascript`，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

1.  `DIV`浮动IE文本产生3象素的`bug`  
    左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有`3px`的间距.

#box{  float:left; width:800px;} 
    #left{  float:left; width:50%;} 
    #right{  width:50%;} 
    *html #left{  margin-right:-3px; //这句是关键} 
    <div id="box">
    <div id="left">＜/div>
    <div id="right">＜/div>
    </div>

1.  IE捉迷藏的问题  
    当`div`应用复杂的时候每个栏中又有一些链接，`DIV`等这个时候容易发生捉迷藏的问题。

有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。

解决办法：对`#layout`使用`line-height`属性或者给`#layout`使用固定高和宽。页面结构尽量简单。

1.  `float`的`div`闭合;清除浮动;自适应高度  
    ① 例如：`＜div id=”floatA”>＜div id=”floatB”>＜div id=”NOTfloatC”>`

这里的`NOTfloatC`并不希望继续平移，而是希望往下排。(其中`floatA、floatB`的属性已经设置为`float:left;`)

这段代码在IE中毫无问题，问题出在FF。原因是`NOTfloatC`并非`float`标签，必须将float标签闭合。在`＜div class=”floatB”>＜div class=”NOTfloatC”>`之间加上`＜div class=”clear”>`这个`div`一定要注意位置，而且必须与两个具有`float`属性的`div`同级，之间不能存在嵌套关系，否则会产生异常。并且将`clear`这种样式定义为为如下即可：`.clear{clear:both;}`

②作为外部 `wrapper` 的 `div` 不要定死高度,为了让高度能自适应，要在`wrapper`里面加上`overflow:hidden`; 当包含`float`的`box`的时候，高度自适应在`IE`下无效，这时候应该触发IE的`layout`私有属性(万恶的IE啊！)用`zoom:1`;可以做到，这样就达到了兼容。  
例如某一个`wrapper`如下定义：

.colwrapper{overflow:hidden; zoom:1; margin:5px auto;}

③对于排版,我们用得最多的css描述可能就是`float:left`.有的时候我们需要在n栏的`float div`后面做一个统一的背景,譬如:

比如我们要将`page`的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着`left center right`的向下拉长,而`page`居然保存高度不变,问题来了,原因在于`page`不是`float`属性,而我们的`page`由于要居中,不能设置成`float`,所以我们应该这样解决：

再嵌入一个`float left`而宽度是100%的`DIV`解决之。

或者另一种方法：用选择器（`：after`）在`page`之后插入一个空标签,并清除浮动

.page:after {   content: ""; display: table; clear: both; }

④万能`float` 闭合(非常重要!)

关于 `clear float` 的原理可参见 \[How To Clear Floats Without Structural Markup\],将以下代码加入`Global CSS` 中,给需要闭合的`div`加上`class="clearfix"` 即可,屡试不爽。

.clearfix:after {  content:"."; display:block; height:0; clear:both; visibility:hidden; } 
    .clearfix {  display:inline-block; } 
    
    .clearfix { display:block;}

或者这样设置：`.hackbox{ display:table; //将对象作为块元素级的表格显示}`

1.  高度不适应  
    高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用`margin` 或`padding`时。

例：

#box {  } 
    #box p { margin-top: 20px;margin-bottom: 20px; text-align:center; } 
    <div id="box">
    <p>p对象中的内容＜/p>
    </div>

解决技巧：在P对象上下各加2个空的div对象CSS代码`{height:0px;overflow:hidden;}`或者为DIV加上`border`属性。

1.  IE6下图片下有空隙产生  
    解决这个BUG的技巧有很多,可以是改变`html`的排版,或者设置`img`为`display:block`或者设置`vertical-align`属性为`vertical-align:top/bottom/middle/text-bottom` 都可以解决.
2.  对齐文本与文本输入框  
    加上`vertical-align:middle;`

经验证，在IE下任一版本都不适用，而`ff、opera、safari、chrome`均OK！

1.  `LI`中内容超过长度后以省略号显示  
    此技巧适用与`IE、Opera、safari、chrome`浏览器，`FF`暂不支持。

1.  为什么web标准中IE无法设置滚动条颜色了  
    解决办法是将`body`换成`html`

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <style type="text/css">
    
    ＜/style>

1.  为什么无法定义`1px`左右高度的容器  
    IE6下这个问题是因为默认的行高造成的,解决的技巧也有很多：  
    例如:`overflow:hidden　 zoom:0.08 　 line-height:1px`

16.怎么样才能让层显示在`FLASH`之上呢

解决的办法是给`FLASH`设置透明

1.  链接(a标签)的边框与背景  
    a链接加边框和背景色，需设置 `display: block`, 同时设置 `float: left` 保证不换行。参照menubar, 给 a 和menubar设置高度是为了避免底边显示错位, 若不设 height, 可以在menubar中插入一个空格。
2.  超链接访问过后`hover`样式就不出现的问题  
    被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序: L-V-H-A

Code:

1.  `FORM`标签  
    这个标签在IE中,将会自动`margin`一些边距,而在FF中`margin`则是`0`,因此,如果想显示一致,所以最好在`css`中指定`margin`和 `padding`,针对上面两个问题,我的`css`中一般首先都使用这样的样式`ul,form{margin:0;padding:0;}`。
2.  属性选择器(这个不能算是兼容,是隐藏css的一个bug)

p[id]{ }
    div[id]{ }

这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用.属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如`p[id]`中,所有p标签中有id的都是同样式的.

1.  为什么FF下文本无法撑开容器的高度  
    标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢？办法就是去掉`height`设置`min-height:200px;` 这里为了照顾不认识`min-height`的IE6 可以这样定义:

{  
    height:auto!important; 
    height:200px; 
    min-height:200px; 
    }

1.  IE和FireFox 对空格的尺寸解释不同，`FireFox`为4px,IE为8px; `FireFox`对div与div之间的空格是忽略的，但是IE是处理的。因此在两个相邻div之间不要有空格跟回车，否则可能造成不同浏览间之间格式不正确，比如著名的3px偏差（多个`img`标签连着，然后定义`float: left;`结果在`firefox`里面正常，而IE里面显示的每个img都相隔了3px。我把标签之间的空格都删除都没有作用。解决方法是在`img`外面套li，并且对li定义`margin: 0;` 避免方式：在必要的时候不要无视 `list` 标签）而且原因难以查明。
2.  条件注释

lte – 小于等于  
lt – 小于  
gte – 大于等于  
gt – 大于  
！ – 不等于

45.强制渲染

46.js兼容文件

使IE5,IE6兼容到IE7模式（推荐）

<!–[if lt IE 7]>
    <script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE7.js” type=”text/javascript”></script>
    <![endif]–>
    使IE5,IE6,IE7兼容到IE8模式
    
    <!–[if lt IE 8]>
    <script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE8.js” type=”text/javascript”></script>
    <![endif]–>
    使IE5,IE6,IE7,IE8兼容到IE9模式
    
    <!–[if lt IE 9]>
    <script src=”http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js”></script>
    <![endif]–>

1.  浏览器识别符

p{  _color:red; }           IE6 专用 *html p{  color:#red; }  IE6 专用 p{  +color:red; }           IE6,7 专用 p{  *color:red; }           IE6,7 专用 *html p{  color:red; }    IE6,7 专用 p{ *+color: red;}          IE7 专用 Body> p{  color: red; }  屏蔽 IE6 p{  color:red\9; }          IE8   
    
    Firefox: -moz-
    Safari: -webkit-
    Opera: -o-
    IE: -ms-