浏览器兼容性问题及解决方案

1 / 16

浏览器兼容新问题

W3C对标准的推进，Firefox，Chrome，Safari，Opera的出现，结束了IE雄霸天下的日子。

然而，这对开发者来说，是好事，也是坏事。

说它是好事，是因为浏览器厂商为了取得更多的市场份额，会促使各浏览器更符合W3C标准，而得到更好的兼容性，并且，不同浏览器的扩展功能(例如 -moz，-webkit开头的样式)，对W3C标准也是个推进；说它是坏事，因为，多个浏览器同时存在，这些浏览器在处理一个相同的页面时，表现有时会有差异。这种差异可能很小，甚至不会被注意到；也可能很大，甚至造成在某个浏览器下无法正常浏览。我们把引起这些差异的问题统称为“浏览器兼容性问题”。而正是这些“浏览器兼容性问题”，无形中给我们的开发增加了不少难度。

从浏览器内核的角度 来看，浏览器兼容性问题可分为以下三类：

1. 渲染相关：和样式相关的问题，即体现在布局效果上的问题。

2. 脚本相关：和脚本相关的问题，包括JavaScript和DOM、BOM方面的问题。对于某些浏览器的功能方面的特性，也属于这一类。

3. 其他类别：除以上两类问题外的功能性问题，一般是浏览器自身提供的功能，在内核层之上的。

例如下面的页面，是一个渲染相关的问题：

在各个浏览器中都表现的不同，这就属于兼容性问题。

造成浏览器兼容性问题的根本原因就是浏览器各浏览器使用了不同的内核，并且它们处理同一件事情的时候思路不同。

现今常见的浏览器及其排版引擎（又称渲染引擎）及脚本引擎，如下：

2 / 16

而造成浏览器兼容性问题的常见原因则是设计师写出了不规范的代码，不规范的代码会使不兼容现象更加突出。

例如：

不规则的嵌套：

HTML code

DIV 中直接嵌套 LI 元素是不合标准的，LI 应该处于 UL 内。此类问题常见的还有 P 中嵌套 DIV， TABLE等元素。

不规范的DOM接口和属性设置：

JScript code

.a_=35;

上面代码中top的值，其实应该是一个字符串值，需有单位。例如：35px。

总之，人为的原因也占很大一部分。而人为造成兼容性问题的原因，除了粗心之外，大都源于浏览器bug的存在，和开发者对标准的不了解。

比如，如果要做一个功能，功能是想让鼠标悬停在 IMG 元素上方时，可以出现提示信息，经常针对 IE

做开发的人，可能会使用 IMG 元素的 “alt” 属性，但其他浏览器中就是不给 ‘alt’ 属性面子。因为

W3C 标准中规定要去做这件事的属性是 ”title“，大多浏览器符合标准，IE 不符合，这是 IE 浏览器内核的问题；开发者不知道 ”title“ 才是正解，不遵循标准去写代码，是开发者的问题。所以，一个问题分两半，浏览器和开发者都有责任。

既然都有责任，就都有义务去解决兼容性问题。那么，从浏览器的角度来讲，它的厂商应该修复浏览器的bug和不合标准的地方，当某一天 IE 的 ”alt“ 不能用于提示了，还有人用这个错误的属性去显示提示么？ 从开发者角度来讲，多了解标准，了解浏览器兼容性问题，就可以在开发的过程中，有效的避开兼容性问题，让你的页面在所有浏览器中畅通无阻。

废话少说，下面就讲讲如何有效的避免一些兼容性问题。

➢

JAVASCRIPT ..................................................................................................................................................... 4

3 / 16

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

11.

12.

13.

14.

15.

16.

➢

HTML对象获取问题 .......................................................................................................................... 5

const问题 ........................................................................................................................................... 5

event.x与event.y问题 ...................................................................................................................... 5

问题 ................................................................................................................. 5

frame问题 .......................................................................................................................................... 5

模态和非模态窗口问题 ..................................................................................................................... 6

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

(”itemName”) 问题 ................................................................................ 6

集合类对象问题................................................................................................................................. 6

自定义属性问题................................................................................................................................. 7

属性问题 ........................................................................................................................... 7

ment问题 ....................................................................................................................... 7

body载入问题 ................................................................................................................................... 7

事件委托方法 .................................................................................................................................... 8

Table操作问题 ................................................................................................................................... 8

对象宽高赋值问题............................................................................................................................. 8

CSS ............................................................................................................................................................... 8

1.

2.

3.

4.

5.

6.

cursor:hand VS cursor:pointer ...................................................................................................... 8

innerText在IE中能正常工作，但在FireFox中却不行. ................................................................. 8

CSS透明 .............................................................................................................................................. 9

css中的width和padding ................................................................................................................. 9

FF和IE BOX模型解释不一致导致相差 9

IE5 和IE6的BOX解释不一致 .......................................................................................................... 9

4 / 16

7.

8.

9.

10.

11.

12.

13.

14.

15.

16.

17.

18.

19.

20.

21.

22.

23.

24.

25.

26.

ul和ol列表缩进问题...................................................................................................................... 10

元素水平居中问题........................................................................................................................... 10

Div的垂直居中问题 ........................................................................................................................ 10

margin加倍的问题 .......................................................................................................................... 10

IE与宽度和高度的问题 ................................................................................................................... 11

页面的最小宽度............................................................................................................................... 11

DIV浮动IE文本产生3象素的bug ................................................................................................ 11

IE捉迷藏的问题............................................................................................................................... 12

float的div闭合;清除浮动;自适应高度 ......................................................................................... 12

高度不适应 ...................................................................................................................................... 13

IE6下图片下有空隙产生 ................................................................................................................. 14

对齐文本与文本输入框 ................................................................................................................... 14

LI中内容超过长度后以省略号显示 ............................................................................................... 14

为什么web标准中IE无法设置滚动条颜色了 ............................................................................. 15

为什么无法定义1px左右高度的容器 ........................................................................................... 15

链接(a标签)的边框与背景 ............................................................................................................. 15

超链接访问过后hover样式就不出现的问题 ............................................................................... 16

FORM标签 ....................................................................................................................................... 16

属性选择器(这个不能算是兼容,是隐藏css的一个bug) .............................................................. 16

为什么FF下文本无法撑开容器的高度 ......................................................................................... 16

➢ JAVASCRIPT

5 / 16

1. HTML对象获取问题

FireFox：mentById("idName");

ie:或者mentById("idName").

解决办法：统一使用mentById("idName");

2. const问题

说明:Firefox下,可以使用const关键字或var关键字来定义常量;

IE下,只能使用var关键字来定义常量.

解决方法： 统一使用var关键字来定义常量.

3. event.x与event.y问题

说明:IE下,event对象有x,y属性,但是没有pageX,pageY属性;

Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.

解决方法：使用mX(mX = event.x ? event.x : ;)来代替IE下的event.x或者Firefox下的.

4. 问题

说明:IE或者Firefox2.0.x下,可以使用on或;

Firefox1.5.x下,只能使用on.

解决方法：使用on来代替.

5. frame问题

以下面的frame为例：

(1)访问frame对象:

IE:使用d或者ame来访问这个frame对象. frameId和frameName可以同名。

6 / 16

Firefox:只能使用ame来访问这个frame对象.

另外，在IE和Firefox中都可以使用mentById("frameId")来访问这个frame对象.

(2)切换frame内容:

在 IE和Firefox中都可以使用mentById("testFrame").src = ""或on = ""来切换frame的内容.

如果需要将frame中的参数传回父窗口(注意不是opener,而是parent frame)，可以在frame中使用parent来访问父窗口。例如：="Aqing";

6. 模态和非模态窗口问题

说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能.

解决方法：直接使用(pageURL,name,parameters)方式打开新窗口。

如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用来访问父窗口.

例如：var parWin = ; mentById("Aqing").value = "Aqing";

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

IE：Element

firefox：Node

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

8. (”itemName”) 问题

问题说明：IE下，可以使用 (”itemName”) 或 ts

["elementName"]；Firefox 下，只能使用ts["elementName"]。

解决方法：统一使用ts["elementName"]。

9. 集合类对象问题

7 / 16

问题说明：IE下，可以使用 () 或 [] 获取集合类对象；Firefox下，只能使用 [ ]获取集合类对象。

解决方法：统一使用 [] 获取集合类对象。

10. 自定义属性问题

问题说明：IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用 getAttribute() 获取自定义属性；Firefox下，只能使用 getAttribute() 获取自定义属性。

解决方法：统一通过 getAttribute() 获取自定义属性。

11. 属性问题

问题说明：IE下 属性为只读；但是Firefox下 属性为读写。

解决办法：不修改 属性。如果必须要修改，可以先隐藏原来的input，然后在同样的位置再插入一个新的input元素。

12. ment问题

问题说明：IE下，even对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有srcElement属性。

解决方法：使用srcObj = ment ? ment : ;

如果考虑第8条问题，就改用myEvent代替event即可。

13. body载入问题

问题说明：Firefox的body对象在body标签没有被浏览器完全读入之前就存在；而IE的body对象则必须在body标签被浏览器完全读入之后才存在。

[注] 这个问题尚未实际验证，待验证后再来修改。

[注] 经验证，IE6、Opera9以及FireFox2中不存在上述问题，单纯的JS脚本可以访问在脚本之前已经载入的所有对象和元素，即使这个元素还没有载入完成。

8 / 16

14. 事件委托方法

问题说明：IE下，使用 = inject; 其中function inject()在这之前已被实现；在Firefox下，使用 = inject();

解决方法：统一使用 =new Function(’inject()’); 或者 =

function(){/* 这里是代码 */}

[注意] Function和function的区别。

15. Table操作问题

问题说明：ie、firefox以及其它浏览器对于 table 标签的操作都各不相同，在ie中不允许对table和tr的innerHTML赋值，使用js增加一个tr时，使用appendChild方法也不管用。

解决方法：//向table追加一个空行：

var row = Row(-1);var cell = Element("td");TML = "";ame =

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

16. 对象宽高赋值问题

问题说明：FireFox中类似 = 的语句无效。

➢ CSS

1. cursor:hand VS cursor:pointer

firefox不支持hand，但ie支持pointer

解决方法: 统一使用pointer

2. innerText在IE中能正常工作，但在FireFox中却不行.

9 / 16

需用textContent。

解决方法:

if(f("Explorer") > -1){

mentById('element').innerText = "my text";

} else{

mentById('element').textContent = "my text";

}

3. CSS透明

IE：filter:progid:(style=0,opacity=60)。

FF：opacity:0.6。

4. css中的width和padding

在IE7和FF中width宽度不包括padding，在Ie6中包括padding.

5. FF和IE BOX模型解释不一致导致相差2px

{width:100;border 1px;}

ie理解为 = 100

ff理解为 = 100 + 1*2 = 102 //加上边框2px

解决方法：div{margin:30px!important;margin:28px;}

注意这两个margin的顺序一定不能写反， IE不能识别!important这个属性，但别的浏览器可以识别。所以在IE下其实解释成这样：div{maring:30px;margin:28px}

重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;

6. IE5 和IE6的BOX解释不一致

IE5下div{width:300px;margin:0 10px 0 10px;}

div 的宽度会被解释为300px-10px(右填充)-10px(左填充)，最终div的宽度为280px，而在IE6和其他浏览器上

10 / 16

宽度则是以 300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改

div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}

7. 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三项才能达到最终效果。

8. 元素水平居中问题

FF: margin:0 auto;

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

9. Div的垂直居中问题

vertical-align:middle; 将行距增加到和整个DIV一样高：line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行。

10. margin加倍的问题

设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;

例如：