设计CSS浏览器兼容性.docx

设计CSS浏览器兼容性.docx

《设计CSS浏览器兼容性.docx》由会员分享，可在线阅读，更多相关《设计CSS浏览器兼容性.docx（15页珍藏版）》请在冰点文库上搜索。

设计CSS浏览器兼容性

目录

JavaScript3

1.HTML对象获取问题3

2.const问题3

3.event.x与event.y问题3

4.window.location.href问题3

5.frame问题3

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

7.firefox与IE的父元素（parentElement）的区别4

8.document.formName.item（”itemName”）问题4

9.集合类对象问题5

10.自定义属性问题5

11.input.type属性问题5

12.event.srcElement问题5

13.body载入问题5

14.事件委托方法6

15.Table操作问题6

16.对象宽高赋值问题6

CSS6

1.cursor:

hand  VS  cursor:

pointer7

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

3.CSS透明7

4.css中的width和padding7

5.FF和IEBOX模型解释不一致导致相差2px7

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

7.ul和ol列表缩进问题8

8.元素水平居中问题8

9.Div的垂直居中问题8

10.margin加倍的问题8

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

12.页面的最小宽度9

13.DIV浮动IE文本产生3象素的bug9

14.IE捉迷藏的问题10

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

16.高度不适应12

17.IE6下图片下有空隙产生12

18.对齐文本与文本输入框12

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

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

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

22.链接（a标签）的边框与背景14

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

24.FORM标签14

25.属性选择器（这个不能算是兼容,是隐藏css的一个bug）14

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

ØJavaScript

1.HTML对象获取问题

FireFox：

document.getElementById（"idName"）;

ie:

document.idname或者document.getElementById（"idName"）.

解决办法：

统一使用document.getElementById（"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  :

  event.pageX;）来代替IE下的event.x或者Firefox下的event.pageX.

4.window.location.href问题

说明:

IE或者Firefox2.0.x下,可以使用window.location或window.location.href;

Firefox1.5.x下,只能使用window.location.

解决方法：

使用window.location来代替window.location.href.

5.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";

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

说明:

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

解决方法：

直接使用window.open（pageURL,name,parameters）方式打开新窗口。

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

例如：

var  parWin  =  window.opener;  parWin.document.getElementById（"Aqing"）.value  =  "Aqing";

7.firefox与IE的父元素（parentElement）的区别

IE：

obj.parentElement

firefox：

obj.parentNode

解决方法:

  因为firefox与IE都支持DOM,因此使用obj.parentNode是不错选择.

8.document.formName.item（”itemName”）问题

问题说明：

IE下，可以使用document.formName.item（”itemName”）或document.formName.elements["elementName"]；Firefox下，只能使用document.formName.elements["elementName"]。

解决方法：

统一使用document.formName.elements["elementName"]。

9.集合类对象问题

问题说明：

IE下，可以使用（）或[]获取集合类对象；Firefox下，只能使用[]获取集合类对象。

解决方法：

统一使用[]获取集合类对象。

10.自定义属性问题

问题说明：

IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute（）获取自定义属性；Firefox下，只能使用getAttribute（）获取自定义属性。

解决方法：

统一通过getAttribute（）获取自定义属性。

11.input.type属性问题

问题说明：

IE下input.type属性为只读；但是Firefox下input.type属性为读写。

解决办法：

不修改input.type属性。

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

12.event.srcElement问题

问题说明：

IE下，even对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有srcElement属性。

解决方法：

使用srcObj=event.srcElement?

event.srcElement:

event.target;

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

13.body载入问题

问题说明：

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

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

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

14.事件委托方法

问题说明：

IE下，使用document.body.onload=inject;其中functioninject（）在这之前已被实现；在Firefox下，使用document.body.onload=inject（）;

解决方法：

统一使用document.body.onload=newFunction（’inject（）’）;或者document.body.onload=function（）{/*这里是代码*/}

[注意]Function和function的区别。

15.Table操作问题

问题说明：

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

解决方法：

//向table追加一个空行：

varrow=otable.insertRow（-1）;varcell=document.createElement（"td"）;cell.innerHTML="";cell.className="XXXX";row.appendChild（cell）;[注]由于俺很少使用JS直接操作表格，这个问题没有遇见过。

建议使用JS框架集来操作table，如JQuery。

16.对象宽高赋值问题

问题说明：

FireFox中类似obj.style.height=imgObj.height的语句无效。

ØCSS

17.cursor:

hand  VS  cursor:

pointer

firefox不支持hand，但ie支持pointer

解决方法:

  统一使用pointer

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

需用textContent。

解决方法:

if（navigator.appName.indexOf（"Explorer"）  >  -1）{

       document.getElementById（'element'）.innerText  =  "my  text";

}  else{

       document.getElementById（'element'）.textContent  =  "my  text";

}

19.CSS透明

IE：

filter:

progid:

DXImageTransform.Microsoft.Alpha（style=0,opacity=60）。

FF：

opacity:

0.6。

20.css中的width和padding

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

21.FF和IEBOX模型解释不一致导致相差2px

box.style{width:

100;border1px;}

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;

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

IE5下div{width:

300px;margin:

010px010px;}

div的宽度会被解释为300px-10px（右填充）-10px（左填充），最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px+10px（右填充）+10px（左填充）=320px来计算的。

这时我们可以做如下修改div{width:

300px!

important;width/**/:

340px;margin:

010px010px}

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

24.元素水平居中问题

FF:

margin:

0auto;

IE:

父级{text-align:

center;}

25.Div的垂直居中问题

vertical-align:

middle;将行距增加到和整个DIV一样高：

line-height:

200px;然后插入文字，就垂直居中了。

缺点是要控制内容不要换行。

26.margin加倍的问题

设置为float的div在ie下设置的margin会加倍。

这是一个ie6都存在的bug。

解决方案是在这个div里面加上display:

inline;

例如：

相应的css为

#imfloat{

float:

left;

margin:

5px;/*IE下理解为10px*/

display:

inline;/*IE下再理解为5px*/}

27.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;}

28.页面的最小宽度

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

#container{min-width:

600px;width:

expression（document.body.clientWidth＜600?

"600px":

"auto"）;}

第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。

它实际上通过Javascript的判断来实现最小宽度。

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

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.

#box{float:

left;width:

800px;}

#left{float:

left;width:

50%;}

#right{width:

50%;}

*html#left{margin-right:

-3px;//这句是关键}

＜/div>

＜/div>