浏览器兼容性

最新推荐文章于 2024-08-02 17:14:40 发布

原创最新推荐文章于 2024-08-02 17:14:40 发布 · 322 阅读

1 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了浏览器兼容性问题，包括DOM、EVENT兼容性等方面的知识。针对不同浏览器内核导致的显示差异进行了说明，并提供了多种解决方案。

浏览器兼容性即网页兼容性或网站兼容性，是指因为不同浏览器使用内核及所支持的HTML等网页语言标准不同；以及客户端环境不同，如分辨率等，网页在各种浏览器上的显示效果可能不一致。

DOM兼容性：

在使用JavaScript获取触发事件的源目标时IE和FireFox(火狐)不同表现，也就是说是网页中那个元素触发了事件

在IE浏览器里使用srcElement（常用的event.srcElement.value ..得到标记的各种属性值
event.srcElement.parentElement.各属性，如event.srcElement.parentElement.title 得到上一节点标签名称和title属性值
event.srcElement.各标签属性，如第一个子标签为event.srcElement.firstChild
event.srcElement.parentNode，如event.srcElement.parentNode.tagName得到上一个节点的标签名称）
在FireFox（火狐）浏览器里使用target，如event.target.name，event.target.id

使用Dom获取和更改网页标签元素内文本的问题

在IE浏览器里使用innerText
在FireFox（火狐）浏览器里使用textContent

鼠标在元素内的位置

IE中使用offsetX和offsetY来获取鼠标在网页中某一元素的位置
FireFox使用layerX和layerY来得到鼠标在网页中某一元素的位置

动态为网页或元素绑定与删除事件的问题

在IE中绑定事件的方法是attachEvent
在IE中删除绑定事件的方法是detachEvent
在FireFox中绑定事件的方法是addEventListener
在FireFox中删除绑定事件的方法是removeEventListener

DOM兼容性及其他小知识链接：http://www.html-js.com/article/JavaScript-1-part-of-the-DOM-operating-compatibility-and-other-small-knowledge

EVENT兼容性：

JavaScript event兼容性随笔链接：http://www.cnblogs.com/jasenkin/p/javascript_event.html

IE和Firefox浏览器的event事件兼容性汇总：https://blog.youkuaiyun.com/bob007/article/details/6547507

浏览器兼容性改造之HTML Event 博客：https://blog.youkuaiyun.com/xuanze520/article/details/8060714

常见JS兼容性问题：

当要使用的特性和平台有关时，先进行检测再使用，检测方式有两种：一是直接检测平台是否支持该特性，二是检测平台类型再使用相应的特性。

IE有window.event对象，火狐没有window.event对象。可以通过给函数传递event对象，如οnmοusemοve=doMouseMove(event)
IE下，event对象有srcElement属性，但是没有target属性，火狐下，even对象有target属性，但是没有srcElement。可以使用obj(obj=event.srcElement?event.srcElement:event.target;)来代替IE下的event.srcElement或者火狐下的event.target，同时还要注意event的兼容性。
窗体的高度和宽度：IE为document.body.offsetWidth和document.body.offsetHeight,注意此时页面一定要有body标签。火狐为window.innerWidth和window.innerHeight，及document.documentElement.clientWidth和document.documentElement.clientHeight。通用为document.body.clientWidth和document.body.clientHeight。
IE下input.type属性为只读，火狐下input.type属性为读写。
IE或者火狐2.0x下，可以使用window.location或window.location.href，火狐1.5x下只能使用window.location。可以使用window.location代替window.location.href。
IE下可以通过showModalDialog和showModelessDialog打开模态和非模态窗口，火狐下则不能。可以直接使用window.open(pageURL,name,parameters)方式打开新窗口。如果需要将子窗口中的参数传递回父窗口，可以在子窗口中使用window.opener来访问父窗口，如var parWin=window.opener;parWin.document.getElementById("Aqing")="Aqing";

捕获事件：火狐没有setCapture()、releaseCapture()方法，解决：IE使用obj.setCapture()或obj.releaseCapture(),火狐使用：

window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
if(!window.captureEvents{
o.setCapture();
}
else{
window.captureEvents(Event.MouseMOVE|Event.MOUSEUP);
}
if(!window.captureEvents{
o.releaseCapture();
}
else{
window.releaseEvents(Event.MouseMOVE|Event.MOUSEUP)
}

禁止选取网页内容，火狐要用css禁止：-moz-user-select:none;IE使用JS：obj.onselectstart=function(){return false;}
CSS透明，IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。火狐：opacity:0.6。
CSS圆角：IE不支持圆角。火狐：-moz-border-radius:4px或者-moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border-radius-bottomright:4px;
CSS双线凹凸边框，IE：border:2px outset;火狐：-moz-border-top-colors:#d4d0c8 white;-moz-border-left-colors:#d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;