浏览器兼容性整理v40.docx
- 文档编号:30775958
- 上传时间:2023-08-23
- 格式:DOCX
- 页数:10
- 大小:258.82KB
浏览器兼容性整理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库一般都会有大量第三方为其制作组件,这样我们在开发项目时,可以直接使用第三方的组件,从而大大提高工作效率。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 浏览器 兼容性 整理 v40