2022年2022年浏览器兼容性汇总 .pdf

《2022年2022年浏览器兼容性汇总 .pdf》由会员分享，可在线阅读，更多相关《2022年2022年浏览器兼容性汇总 .pdf（15页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、1/15目录JAVASCRIPT.31.HTML 对象获取问题.32.const 问题.33.event.x 与 event.y 问题 .34.window.location.href问题.35.frame 问题.36.模态和非模态窗口问题.47.firefox 与 IE的父元素(parentElement)的区别.48.document.formName.item(”itemName”)问题.49.集合类对象问题.510.自定义属性问题.511.input.type 属性问题.512.event.srcElement 问题.513.body 载入问题.514.事件委托方法.615.Table

2、 操作问题.616.对象宽高赋值问题.6CSS.61.cursor:hand VS cursor:pointer.62.innerText 在 IE中能正常工作，但在FireFox 中却不行.73.CSS透明 .74.css 中的 width 和 padding.7名师资料总结-精品资料欢迎下载-名师精心整理-第 1 页，共 15 页 -2/155.FF和 IE BOX模型解释不一致导致相差2px.76.IE5 和 IE6 的 BOX解释不一致.87.ul 和 ol 列表缩进问题.88.元素水平居中问题.89.Div 的垂直居中问题.810.margin 加倍的问题.811.IE与宽度和高度的

3、问题.912.页面的最小宽度.913.DIV 浮动 IE文本产生3 象素的 bug.914.IE捉迷藏的问题.1015.float 的 div 闭合;清除浮动;自适应高度.1016.高度不适应 .1217.IE6 下图片下有空隙产生.1218.对齐文本与文本输入框.1219.LI 中内容超过长度后以省略号显示.1320.为什么 web 标准中 IE 无法设置滚动条颜色了.1321.为什么无法定义1px 左右高度的容器.1322.链接(a 标签)的边框与背景.1423.超链接访问过后hover 样式就不出现的问题.1424.FORM标签 .1425.属性选择器(这个不能算是兼容,是隐藏 css

4、的一个 bug).1426.为什么 FF下文本无法撑开容器的高度.14名师资料总结-精品资料欢迎下载-名师精心整理-第 2 页，共 15 页 -3/15JAVASCRIPT1.HTML对象获取问题FireFox：document.getElementById(idName);ie:document.idname或者 document.getElementById(idName).解决办法：统一使用 document.getElementById(idName);2.const问题说明:Firefox 下,可以使用const 关键字或var 关键字来定义常量;IE下,只能使用var 关键字来定义

5、常量.解决方法：统一使用 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或 windo

6、w.location.href;Firefox1.5.x 下,只能使用window.location.解决方法：使用 window.location来代替 window.location.href.5.frame 问题以下面的frame 为例：名师资料总结-精品资料欢迎下载-名师精心整理-第 3 页，共 15 页 -4/15(1)访问 frame 对象:IE:使用 window.frameId或者 window.frameName来访问这个frame 对象.frameId 和 frameName 可以同名。Firefox:只能使用 window.frameName来访问这个frame 对象.另

7、外，在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来访问父窗口。例如：paren

8、t.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 =Aqi

9、ng;7.firefox 与 IE的父元素(parentElement)的区别IE：obj.parentElement firefox：obj.parentNode 解决方法:因为 firefox 与 IE 都支持 DOM,因此使用obj.parentNode是不错选择.8.document.formName.item(”itemName”)问题名师资料总结-精品资料欢迎下载-名师精心整理-第 4 页，共 15 页 -5/15问题说明：IE下，可以使用document.formName.item(”itemName”)或 document.formName.elements elementNa

10、me；Firefox 下，只能使用document.formName.elementselementName。解决方法：统一使用document.formName.elementselementName。9.集合类对象问题问题说明：IE下，可以使用()或 获取集合类对象；Firefox 下，只能使用 获取集合类对象。解决方法：统一使用 获取集合类对象。10.自定义属性问题问题说明：IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义属性；Firefox 下，只能使用getAttribute()获取自定义属性。解决方法：统一通过getAttribu

11、te()获取自定义属性。11.input.type 属性问题问题说明：IE 下 input.type属性为只读；但是Firefox 下 input.type属性为读写。解决办法：不修改 input.type属性。如果必须要修改，可以先隐藏原来的input，然后在同样的位置再插入一个新的 input 元素。12.event.srcE lement 问题问题说明：IE 下，even 对象有 srcElement 属性，但是没有target 属性；Firefox 下，even 对象有 target 属性，但是没有 srcElement 属性。解决方法：使用 srcObj=event.srcEleme

12、nt?event.srcElement:event.target;如果考虑第8 条问题，就改用myEvent 代替 event 即可。13.body 载入问题名师资料总结-精品资料欢迎下载-名师精心整理-第 5 页，共 15 页 -6/15问题说明：Firefox 的 body 对象在 body 标签没有被浏览器完全读入之前就存在；而IE 的 body 对象则必须在body 标签被浏览器完全读入之后才存在。注 这个问题尚未实际验证，待验证后再来修改。注 经验证，IE6、Opera9 以及 FireFox2 中不存在上述问题，单纯的JS脚本可以访问在脚本之前已经载入的所有对象和元素，即使这个元素

13、还没有载入完成。14.事件委托方法问题说明：IE下，使用 document.body.onload=inject;其中 function inject()在这之前已被实现；在Firefox 下，使用 document.body.onload=inject();解决方法：统一使用document.body.onload=new Function(inject();或者 document.body.onload=function()/*这里是代码*/注意 Function 和 function 的区别。15.Table 操作问题问题说明：ie、firefox 以及其它浏览器对于table 标签的操

14、作都各不相同，在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。16.对象宽高赋值问题问题说明：FireFox

15、 中类似 obj.style.height=imgObj.height的语句无效。CSS 1.cursor:hand VS cursor:pointer 名师资料总结-精品资料欢迎下载-名师精心整理-第 6 页，共 15 页 -7/15firefox 不支持 hand，但 ie 支持 pointer 解决方法:统一使用pointer 2.innerText在 IE中能正常工作，但在FireFox中却不行.需用 textContent。解决方法:if(navigator.appName.indexOf(Explorer)-1)document.getElementById(element).in

16、nerText =my text;else document.getElementById(element).textContent =my text;3.CSS透明IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。FF：opacity:0.6。4.css中的 width 和 padding 在 IE7和 FF 中 width 宽度不包括padding，在 Ie6 中包括 padding.5.FF 和 IEBOX模型解释不一致导致相差2px box.stylewidth:100;border 1px;ie

17、 理解为 box.width=100 ff 理解为 box.width=100+1*2=102/加上边框 2px 解决方法：divmargin:30px!important;margin:28px;注意这两个margin 的顺序一定不能写反，IE不能识别!important这个属性，但别的浏览器可以识别。所以在 IE下其实解释成这样：divmaring:30px;margin:28px 重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;名师资料总结-精品资料欢迎下载-名师精心整理-第 7 页，共 15 页 -8/156.IE5 和 IE6的 BOX解释不

18、一致IE5 下 divwidth:300px;margin:0 10px 0 10px;div 的宽度会被解释为300px-10px(右填充)-10px(左填充)，最终 div 的宽度为 280px，而在 IE6 和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px 来计算的。这时我们可以做如下修改divwidth:300px!important;width/*/:340px;margin:0 10px 0 10px 7.ul 和 ol 列表缩进问题消除 ul、ol 等列表的缩进时，样式应写成：list-style:none;margin:0px;paddin

19、g: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;I

20、E:父级 text-align:center;9.Div 的垂直居中问题vertical-align:middle;将行距增加到和整个DIV一样高：line-height:200px;然后插入文字，就垂直居中了。缺点是要控制内容不要换行。10.margin 加倍的问题设置为 float 的 div 在 ie 下设置的margin 会加倍。这是一个ie6 都存在的bug。解决方案是在这个div 里面加上 display:inline;名师资料总结-精品资料欢迎下载-名师精心整理-第 8 页，共 15 页 -9/15例如：相应的 css 为#imfloat float:left;margin:5p

21、x;/*IE下理解为10px*/display:inline;/*IE下再理解为5px*/11.IE与宽度和高度的问题IE不认得 min-这个定义，但实际上它把正常的width 和 height 当作有 min 的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width 和 min-height 的话，IE 下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：#box width:80px;height:35px;htmlbody#box width:auto;height:auto;min-wid

22、th:80px;min-height:35px;12.页面的最小宽度如上一个问题，I E不识别 min，要实现最小宽度，可用下面的方法：#container min-width:600px;width:expression(document.body.clientWidth 600?600px:auto);第一个 min-width 是正常的；但第 2 行的 width 使用了 Javascript，这只有 IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript 的判断来实现最小宽度。13.DIV 浮动 IE文本产生 3 象素的 bug 左边对象浮动，右边采用外补丁的左

23、边距来定位，右边对象内的文本会离左边有3px 的间距.#box float:left;width:800px;#left float:left;width:50%;#right width:50%;名师资料总结-精品资料欢迎下载-名师精心整理-第 9 页，共 15 页 -10/15*html#left margin-right:-3px;/这句是关键 /div /div 14.IE捉迷藏的问题当 div 应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。解决办法：对#layout 使用 line-height

24、属性或者给#layout 使用固定高和宽。页面结构尽量简单。15.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”这

25、个 div 一定要注意位置，而且 必须与两个具有float 属性的 div 同级，之间不能存在嵌套关系，否则会产生异常。并且将clear 这种样式定义为为如下即可：.clearclear:both;作为外部wrapper 的 div 不要定死高度,为了让 高度能自适应，要在 wrapper 里面加上overflow:hidden;当包含 float 的 box 的时候，高度自适应在IE下无效，这时候应该触发IE 的 layout 私有属性(万恶的 IE啊！)用 zoom:1;可以做到，这样就达到了兼容。例如某一个wrapper 如下定义：.colwrapperoverflow:hidden;z

26、oom:1;margin:5px auto;名师资料总结-精品资料欢迎下载-名师精心整理-第 10 页，共 15 页 -11/15 对于排版,我们用得最多的css 描述可能就是float:left.有的时候我们需要在n 栏的 float div 后面做一个统一的背景,譬如:/div/div/div 比如我们要将page 的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left center right的向下拉长,而 page 居然保存高度不变,问题来了,原因在于 page 不是 float 属性,而我们的 page由于要居中,不能设置成float,所以我们应该这样解决

27、：/div/div/div 再嵌入一个float left 而宽度是100%的 DIV 解决之。万能 float 闭合(非常重要!)关于 clear float 的原理可参见How To Clear Floats Without Structural Markup,将以下代码加入Global CSS 中,给需要闭合的div 加上 class=clearfix 即可,屡试不爽。/*Clear Fix*/.clearfix:after content:.;display:block;height:0;clear:both;visibility:hidden;.clearfix display:in

28、line-block;/*Hide from IE Mac*/.clearfix display:block;名师资料总结-精品资料欢迎下载-名师精心整理-第 11 页，共 15 页 -12/15/*End hide from IE Mac*/*end of clearfix*/或者这样设置：.hackbox display:table;/将对象作为块元素级的表格显示 16.高度不适应高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或 padding 时。例：#box background-color:#eee;#box p margin-to

29、p:20px;margin-bottom:20px;text-align:center;p 对象中的内容/p 解决技巧：在P对象上下各加2 个空的 div 对象 CSS代码 height:0px;overflow:hidden;或者为 DIV加上border 属性。17.IE6下图片下有空隙产生解决这个 BUG的技巧有很多,可以是改变html 的排版,或者设置 img 为 display:block 或者设置 vertical-align属性为 vertical-align:top/bottom/middle/text-bottom 都可以解决.18.对齐文本与文本输入框加上 vertical

30、-align:middle;经验证，在IE 下任一版本都不适用，而ff、opera、safari、chrome 均 OK！19.LI中内容超过长度后以省略号显示此技巧适用与IE、Opera、safari、chrom 浏览器，FF 暂不支持。20.为什么 web 标准中 IE无法设置滚动条颜色了解决办法是将body 换成 html /style 21.为什么无法定义1px 左右高度的容器IE6 下这个问题是因为默认的行高造成的,解决的技巧也有很多：名师资料总结-精品资料欢迎下载-名师精心整理-第 13 页，共 15 页 -14/15例如:overflow:hiddenzoom:0.08 line

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

32、个标签在IE 中,将会自动margin 一些边距,而在 FF中 margin 则是 0,因此,如果想显示一致,所以最好在css中指定 margin 和 padding,针对上面两个问题,我的 css 中一般首先都使用这样的样式ul,formmargin:0;padding:0;。25.属性选择器(这个不能算是兼容,是隐藏 css的一个 bug)piddivid 这个对于 IE6.0 和 IE6.0 以下的版本都隐藏,FF和 OPera 作用.属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如 pid 中,所有 p 标签中有id 的都是同样式的.26.为什么 FF下文本无法撑开容器的高度名师资料总结-精品资料欢迎下载-名师精心整理-第 14 页，共 15 页 -15/15标准浏览器中固定高度值的容器是不会象IE6 里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢？办法就是去掉height 设置 min-height:200px;这里为了照顾不认识min-height 的 IE6 可以这样定义:height:auto!important;height:200px;min-height:200px;名师资料总结-精品资料欢迎下载-名师精心整理-第 15 页，共 15 页 -