2022年2022年跨浏览器兼容性总结 .pdf

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

1、跨浏览器兼容性总结一、CSS样式兼容1.FLOAT 闭合（ clearing float ）网页在某些浏览器上显示错位很多时候都是因为使用了float 浮动而没有真正闭合，这也是 div 无法自适应高度的一个原因。如果父div 没有设 float 而其子 div 却设了 float 的话 ,父 div 无法包住整个子DIV，这种情况一般出现在一个父 DIV下包含多个子DIV。解决办法：1)给父 DIV也设上 float 2)在所有子DIV 后新加一个空DIV（目前 Ext 是这么做的），比如：.parentwidth:100px; .son1float:left;width:20px; .so

2、n2float:left;width:80px; .clearclear:both;margin:0;parding0;height:0px;font-size:0px; 3)万能float 闭合将以下代码加入Global CSS 中，给需要闭合的div 加上class=”clearfix” 即可，屡试不爽。 /* Clear Fix */ .clearfix:after content:.; display:block; height:0; clear:both; visibility:hidden; .clearfix display:inline-block; /* Hide from

3、IE Mac */ .clearfix display:block; /* End hide from IE Mac */ /* end of clearfix */ :after（伪对象） ,设置在对象后发生的内容，通常和content 配合使用， IE 不支持此伪对象，非Ie 浏览器支持，所以并不影响到IE/WIN 浏览器。这种的最麻烦。4)overflow:auto 只要在父DIV的 CSS中加上 overflow:auto 就搞定。举例：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - -

4、 - 第 1 页，共 13 页 - - - - - - - - - .parentwidth:100px;overflow:auto .son1float:left;width:20px; .son2float:left;width:80px; 原理是，外围元素之所以不能很好的延伸，问题出在了overflow 上，因为overflow 不可见（见W3C的解释）。现在只要将给外围元素添加一个“ overflow:auto ” ，就可以解决问题，结果是除了IE，真的可以解决。下来就要解决IE的问题了，再加上“_height:1%” ，这个问题就完全解决了。我试了一下，其实不加_height:1%“

5、在 IE下也行，留着吧。2.截字省略号.hh -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾。技术是好技术，很多人都喜欢乱用，但注意Firefox 并不支持。页面加上这句就可以让页面兼容IE7了供参考！ 给大家提醒一个漂浮需要注意的问题注意设置DIV宽和高注意设置overflow:hidden; 注意闭合针对火狐父 div 样式 display:inline-block; 3.cursor:hand 和 c

6、ursor:pointer firefox 不支持 hand，但 ie 支持 pointer 解决方法：统一使用pointer 4.CSS 透明几款浏览器对透明度的支持方式各不相同，为了保证在IE, Firefox, Chrome, Safari 等主流浏览器下都能正常显示透明度的效果，我们可以定义一个透明度的class ，因为一写就要写3 条，省的每次都复制来复制去了。具体代码如下：.transparent filter:alpha(opacity=60); /*支持 IE 浏览器 */ -moz-opacity:0.6; /*支持 FireFox 浏览器 */ opacity:0.6; /

7、*支持 Chrome, Opera, Safari 等浏览器 */ 5.css中的 width 和 padding 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 13 页 - - - - - - - - - 在 IE7 和 FF中 width 宽度不包括padding，在 Ie6 中包括 padding。具体参见 附录 1 第一节理解CSS盒子模型更多参见 附录 1：跨浏览器兼容的CSS编码准则和技巧二、JavaScript 兼容1.children与 childNod

8、es IE提供的 children 、childNodes 和 firefox 下的 childNodes 的行为是有区别的，firefox 下 childNodes 会把换行和空白字符都算作父节点的子节点，而IE的 childNodes 和 children 不会。比如： yizhu2000 id 为 dd 的 div 在 IE下用 childNodes 查看，其子节点数为1，而 ff 下为三，我们可以从firefox 的 dom 查看器里面看到他的 childNodes 为n , div, n。要在 firefox 下模拟 children 的属性我们可以这样做：if ( typeof(H

9、TMLElement) != undefined & !window.opera) HTMLElement.prototype._defineGetter_(children, function() for ( var a = , j = 0, n, i = 0; i this.childNodes.length; i+) n = this.childNodesi; if (n.nodeType = 1) aj+ = n; if (n.name) if (!an.name) an.name = ; an.namean.name.length = n; if (n.id) an.id = n;

10、return a; ); 2.firefox和 ie 的事件window.event 只能在 IE下使用，而不能用在Firefox 下， 这是因为 Firefox 的 event 只能在事件发生的现场使用。Firefox必须从源处加入event 作参数传递。IE忽略该参数，用window.event 来读取该event。比方说下面这个在ie 下获得鼠标位置的方法：获得鼠标点击横坐标 function onclick() alert(event.clientX); 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 -

11、- - - - - - 第 3 页，共 13 页 - - - - - - - - - 需要改成获得 OuterHTML function onclick(event) event = event | window.event; alert(event.clientX); 才能在两种浏览器下使用3.HTML对象获取问题FireFox 获取方式document.getElementById(idName)ie 使用 document.idname或者 document.getElementById(idName)解决办法：统一使用document.getElementById(idName); 4

12、.const问题在 Firefox 下，可以使用const 关键字或var 关键字来定义常量；IE下，只能使用var 关键字来定义常量；解决方法：统一使用var 关键字来定义常量。5.frame问题以下面的frame 为例： a)访问 frame 对象IE：使用 window.frameId或者 window.frameName来访问这个frame 对象， frameId 和 frameName 可以同名；Firefox：只能使用window.frameName来访问这个frame 对象；另外， 在 IE和 Firefox 中都可以使用window.document.getElementByI

13、d(frameId)来访问这个frame 对象；b)切换 frame 内容在 IE和 Firefox 中都可以使用window.document.getElementById(testFrame).src = xxx.html或window.frameName.location = xxx.html来切换 frame 的内容；如果需要将frame 中的参数传回父窗口（注意不是opener，而是 parent） ，可以在frame 中使用 parent 来访问父窗口。例如：parent.document.form1.filename.value=Aqing;6.body问题Firefox 的 b

14、ody 在 body 标签没有被浏览器完全读入之前就存在；而IE 的 body 则必须在body 标签被浏览器完全读入之后才存在；名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 13 页 - - - - - - - - - 7.firefox与 IE 的父元素 (parentElement) 的区别IE：obj.parentElement firefox： obj.parentNode 解决方法：因为firefox 与 IE 都支持 DOM，因此全部使用obj.paren

15、tNode8.innerText的问题innerText 在 IE中能正常工作，但是innerText 在 FireFox 中却不行，需用textContent ；解决方法：if (navigator.appName.indexOf(Explorer) -1) document.getElementById(element).innerText = my text; else document.getElementById(element).textContent = my text; 9.AJAX获取 XMLHTTP的区别var xmlhttp; if (window.XMLHttpRequ

16、est) xmlhttp = new XMLHttpRequest(); elseif (window.ActiveXObject) / IE的获取方式 xmlhttp = new ActiveXObject(Microsoft.XMLHTTP); 注意：在IE中， xmlhttp.send(content)方法的 content 可以为空，而firefox 则不能为null，应该用send()，否则会出现411 错误。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页，共 13

17、 页 - - - - - - - - - 附录 1：跨浏览器兼容的CSS编码准则和技巧1.理解 CSS 盒子模型如果你想实现不需要很多奇巧淫技的跨浏览器兼容的CSS 代码，透彻地理解CSS 盒子模型是首要事情，CSS 盒子模型并不难，且基本支持所有浏览器，除了某些特定条件下的IE 浏览器。CSS 盒子模型负责处理以下事情：一个blcok （区块）级对象占据多大的空间该对象的边界，留白盒子的尺寸盒子与页面其它元素的相对位置CSS 盒子模型有以下准则：Block （区块）对象都是矩形（事实上所有对象都如此）其尺寸由width, height, padding, borders, 以及margins

18、 决定如果不设置高度，该盒子的高度将自动适应其包含的内容，加上留白等（除非使用了float）如果不设置宽度，一个非float 型盒子水平上将充满其父容器（扣除父容器的留白）处理 block 级对象时，必须注意以下事项：如果一个盒子的宽度设置为100%，它就不能再设置margins, padding, 和 borders，否则会撑破其父容器垂直毗邻的margin 会引起复杂的坍塌问题，导致布局问题（比如两个垂直毗邻的Block 对象，上面的对象的bottom-margin 为 40，下面的对象的top-margin 为 20，则两个对象的间距将是40，而不是60 - 译者）拥有相对位置和绝对位置

19、的对象，拥有不同的行为在Firefox 的Firebug 中显示的盒子模型2.理解 block 级和 inline 级 对象的区别这个看似简单的问题事如果能透彻地理解，会受益匪浅。下图讲解了block 级对象和inline 级对象的区别：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页，共 13 页 - - - - - - - - - 下面是block 级对象和inline 级对象的基本区别：Block 级对象会自然地水平充满其父容器，因此没有必要为之设置100% 宽度属性Bl

20、ock 级对象的起始摆放位置是其父容器的左上边界，并顺排在其前面的兄弟Block 对象的下方（除非设置float 或绝对位置）Inline 级对象会忽略其宽度和高度设置Inline 级对象会随着文字排版，并受排版属性的影响（如white-space, font-size, letter-spacing）Inline 级对象可以使用vertical-align 属性控制其垂直对齐，block 级对象不可以Inline 级对象的下方会保留一些自然的空间，以适应字母g 一类的会向下探出的笔画一个设置为float 的 inline 对象将变成block 对象3.理解 Floating 和 Cleari

21、ng 属性实现多栏排版的最好方法是使用float 属性， float 也是一个将使你受益匪浅的属性。一个float 对象可以居左或居右，一个设置为float 的对象，将根据设置的方向，左移或右移到其父容器的边界，或其前面的float 对象的边界，而紧随其后的非float 对象或内容，则包围在其相反的方向。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 7 页，共 13 页 - - - - - - - - - 以下是使用float 和 clear 属性的一些重要准则：一个float 对

22、象，将从其置身的block 级非float 内容流中跳出，换句话说，如果你要将一个box 向左边float ，它后面的block 级非float 对象会显示到下方，inline 级内容会在旁边包围要让一段内容从一侧包围一个float 对象，这段内容必须要么是inline 级的，要么也设置为相同方向的float 一个float 对象，如果没有设置宽度，则会自动缩成其包含的内容的宽度，因此最好为float 对象明确设置宽度如果一个block 对象包含float 子对象，会出现本文中阐述的问题。一个设置了clear 属性的对象，将不会包围其前面的float 对象一个既设置了clear 又设置了flo

23、at 属性的对象，只有clear:left 属性生效， clear:right 不起作用4.首先使用IE 进行测试虽然我们都痛恨IE6 和 IE7 ，但当你开始一个新项目的时候，最好还是首先针对这两种浏览器进行测试，否则，如果你在设计在后期才想起针对IE6 和 IE7 进行测试，将出现以下问题：你将不得不使用一些奇巧淫技，甚至使用独立的IE6/7 CSS，导致CSS 文件臃肿。某些地方的布局将不得不重新设计会增加测试的时间你的布局在IE/6/7 中和其它浏览器中不一样在 IE6/7 仍有大量用户基础的国内（感谢中行，建行，农行，工行，以及各级政府网站），忽视这两种浏览器是极不明智的， 首先针对

24、IE6/7 进行设计是一种很好的方法，一般来说， 在 IE6/7 通过测试的站点，在 Firefox，Chrome，Safari ，Opera 等标准浏览器面前基本不会出现问题，前提是，你的CSS 设计是基于W3C 标准的。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 8 页，共 13 页 - - - - - - - - - 5.IE 浏览器最常见的问题IE6 中不可滥用float ，否则会带来内容消失以及文字重复等稀奇古怪的问题IE6 中， float 对象，在float 方向的

25、那边，会出现双倍margin，将display 设置为inline 会解决这个问题IE6/7 中，一个没有直接或间接设置hasLayout 的对象，会发生各种稀奇古怪的问题（译者注：对这类问题， zoom 这个css 属性可以帮很大的忙，将zoom 设置为除了normal 之外的其它值，可以迫使一个对象 hasLayout 同时不影响这个对象的任何视觉外观）IE6 不支持min-width, max-width, min-height, max-height 一类的属性IE6 不支持固定位置背景图IE6/7 不支持很多display 属性值（如inline-table, table-cell,

26、 table-row）IE6 中，只有a 这个对象才可以使用:hover 这个伪类IE 的某些版本对某些CSS 选择器支持很少（如属性选择器，子对象选择器）IE68 对 CSS3 的支持很有限(不过有一些变通方法) 6.永远不要指望在所有浏览器中都一模一样在不同浏览器实现相同的体验个功能是可能的，实现近似像素级的一致外观也是可能的，但永远不要指望一模一样。Form 控件在不同浏览器显示总是不同以下是Facebook 首页中的select 控件，在5 种不同浏览器的显示差异某些Form 控件，如果要求必须跨浏览器一致，可以找到变通办法，如，可以使用图片替代submit 按钮，但有一些控件，比如r

27、adio，select， textarea，文件选择框，是永远都不可能一模一样的。7.字体的表现都有差异先不谈有的字体在有的系统中根本不存在，即时存在，它们在不同系统的渲染效果也不完全一样，比如，名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 9 页，共 13 页 - - - - - - - - - Windows ClearType 支持IE7，但不支持IE6，导致同一个字体在IE7 和 IE6 有不同的样子。字体在IE6 and IE7 中的区别8.使用 CSS 清零使用CSS

28、清零（CSS Reset ）是实现跨浏览器兼容的灵丹妙药，CSS 清零可以消除不同浏览器对margin，padding 这些属性的默认表现，你可以更容易控制诸如对齐，间隙等等问题。推荐使用Eric Meyers CSS清零代码。9.参考 SitePoint s CSS 兼容表SitePoint CSS Reference是一个非常好的资源（下载离线版 ） ，可以用来检查某些CSS 属性的跨浏览器兼容问题名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 10 页，共 13 页 - - -

29、 - - - - - - 10. 结语跨浏览器兼容是个永恒的话题，本文介绍的跨浏览器兼容CSS 准则只是帮助Web 开发设计者尽可能实现这一目标，除了这些， 基于 CSS3 的渐进式增强设计也是一种趋势，Web 开发与设计者可以针对某些浏览器提供增强功能，而在不支持这些增强功能的浏览器中降级使用基本功能。附录 2：浏览器 CSS选择器兼容性注：绿色/ 表示目前支持。橙色/ 表示浏览器部分支持当前CSS选择器。红色/ 表示浏览器完全不支持。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 11 页，共 13 页 - - - - - - - - - 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 12 页，共 13 页 - - - - - - - - - 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 13 页，共 13 页 - - - - - - - - -