浏览器兼容性整理v40.docx
《浏览器兼容性整理v40.docx》由会员分享，可在线阅读，更多相关《浏览器兼容性整理v40.docx（10页珍藏版）》请在冰豆网上搜索。
浏览器兼容性整理v40
浏览器兼容性总结
1浏览器兼容问题案例
签名元件：
原来的实现方式：
Ie可以正常使用
Chrome不支持
原因是：
chrome不支持showModalDialog方法
2兼容性问题由来
因为不同浏览器使用内核及所支持的HTML等网页语言标准不同，导致对html、css、js的支持程度也不同。
Fire-fox、Opera、Safari、Chrome这些IE的挑战者外，IE本身也同时流行着IE6、IE7和IE8三个不同的版本。
不同的浏览器对网页代码的解析存在着或大或小的差异。
我们近期做的平台改造，遇到很多类似的兼容性问题，下面是浏览器兼容性简单总结。
总结分成两块。
3CSS兼容性总结
3.1怪异模式
浏览器用标准模式和怪异模式这两种方法来解析网页。
在标准模式中content-box盒模型下，网页元素width=padding+border+width
怪异模式中border-box盒模型下：
网页元素width=width（已包含padding、border）
（https:
//css-）演示例子。
我们推荐使用标准模式。
3.2DTD
在HTML5中:
DOCTYPEhtml>
漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中（包括IE6、IE7、IE8）就会触发怪异模式
为了避免怪异模式给我们带来不必要的麻烦，我们要养成书写DTD声明的好习惯。
3.3IE的CSShack
CSShack的目的就是使你的CSS代码兼容不同的浏览器。
如：
有个divclass=test，要求在IE6下width为60px，在IE7下width为70px，在IE8下width为80px。
用样式属性前辍法：
“_”只在IE6下生效，“*”在IE6和IE7下生效
3.4png图片
IE6下对png的透明支持并不好,本该是透明的地方，在IE6下会显示为浅蓝色，如下图所示：
在IE7、IE8和Firefox下的效果如图：
可以使用IE下私有的滤镜功能来解决这个问题
functioncorrectPNG（）//correctlyhandlePNGtransparencyinWinIE5.5&6.
{
vararVersion=navigator.appVersion.split（"MSIE"）
varversion=parseFloat（arVersion[1]）
if（（version>=5.5）&&（document.body.filters））
{
for（varj=0;j{
varimg=document.images[j]
varimgName=img.src.toUpperCase（）
if（imgName.substring（imgName.length-3,imgName.length）=="PNG"）
{
varimgID=（img.id）?
"id='"+img.id+"'":
""
varimgClass=（img.className）?
"class='"+img.className+"'":
""
varimgTitle=（img.title）?
"title='"+img.title+"'":
"title='"+img.alt+"'"
varimgStyle="display:
inline-block;"+img.style.cssText
if（img.align=="left"）imgStyle="float:
left;"+imgStyle
if（img.align=="right"）imgStyle="float:
right;"+imgStyle
if（img.parentElement.href）imgStyle="cursor:
hand;"+imgStyle
varstrNewHTML="+"style=\""+"width:
"+img.width+"px;height:
"+img.height+"px;"+imgStyle+";"
+"filter:
progid:
DXImageTransform.Microsoft.AlphaImageLoader"
+"（src=\'"+img.src+"\',sizingMethod='scale'）;\">"
img.outerHTML=strNewHTML
j=j-1
}
}
}
}
window.attachEvent（"onload",correctPNG）;
3.5透明度样式
不同的浏览器实现透明的写法不一致。
为了兼容多数主流浏览器，代码里需做了以下处理：
file.addStyle（"filter","Alpha（opacity=0）"）;//老版本IE
file.addStyle（"-moz-opacity","0"）;//老版火狐
file.addStyle（"-khtml-opacity","0"）;//老版苹果
file.addStyle（"opacity","0"）;//其他浏览器，支持opacity
4DOM兼容性
4.1nextSibling
nextSibling属性用于获取元素的同级下个节点。
在IE下，会弹出1和3，nodeType为1表明item1的nextSibling类型为DOM节点，ul里的子节点个数为3。
在Firefox下，会弹出3和7，表明item1的nextSibling类型为文本节点，ul里的子节点个数为7。
原因：
Firefox会将包括空白、换行等文本信息也当做childNodes中的一员，而IE则会忽略它。
解决：
将所有的空白和换行去掉
4.2event对象
Firefox、Chrome:
没有window.event对象，只有event对象,IE里只支持window.event。
在IE下，event对象是作为window的属性作用于全局作用域的，而在Firefox中，event对象是作为事件的参数存在的。
IE下会弹出0，在Firefox下会弹出1，它就是event对象。
为了兼容IE和Firefox，
4.3阻止事件冒泡的方法
点击黑色区域弹出“你点击的是：
div”；
点击按钮：
先弹出“你点击的是：
input”，再弹出“你点击的是：
div”
因为input包含在div内，点击input时，其实也点击到了div，这时会先触发input的点击事件，再触发div的点击事件。
阻止事件冒泡在IE下是通过设置event对象的cancelBubble属性为true实现的，而在Firefox下则是通过调用event对象的stop-Propagation方法实现的。
If（event.stopPropagation）
{
event.stopPropagation（）;//通过方法
}else{
Event.cancelBubble=true;//通过属性
}
4.4标签的自定义属性
设置HTML对象属性的方法如：
document.all.apple.width=100或者apple.width=100；在FireFox和Chrome中,自己定义的属性必须用getAttribute（）方法获取，也不能像在IE下直接获取.
如在平台签名元件中：
4.5集合类对象的（）与[]的问题
4.6attachEvent和addEventListener
我们希望点击按钮时，能将两个监听函数都触发，先弹出1，接着弹出2。
但事实上，后面的btn.onclick会把前面的btn.onclick覆盖掉，点击按钮时，只会弹出2。
为了解决这个问题，可以使用attachEvent和addEventListener方法来代替onxxx监听事件。
其中attachEvent是IE支持的方法，而addEventListener是Firefox支持的方法
5推荐使用JS类库写代码
坚持不使用JavaScript库写代码是个不好的习惯，就好比明明有强大的IDE可以使用，却偏偏坚持用记事本做开发。
现在流行的开源JavaScript库基本上都非常强大，如：
Prototype、Dojo、Mootools、ExtJS、jQuery和YUI等，无论从代码品质还是易用性上都是非常好的，更重要的是开源JavaScript库一般都会有大量第三方为其制作组件，这样我们在开发项目时，可以直接使用第三方的组件，从而大大提高工作效率。
升级会员 