浏览器兼容性整理v40.docx

浏览器兼容性总结浏览器兼容问题案例签名元件：原来的实现方式：Ie可以正常使用Chrome不支持原因是：chrome不支持showModalDialog方法兼容性问题由来因为不同浏览器使用内核及所支持的HTML等网页语言标准不同，导致对html、css、js的支持程度也不同。Fire-fox、Opera、Safari、Chrome这些IE的挑战者外，IE本身也同时流行着IE 6、IE 7和IE 8三个不同的版本。不同的浏览器对网页代码的解析存在着或大或小的差异。我们近期做的平台改造，遇到很多类似的兼容性问题，下面是浏览器兼容性简单总结。总结分成两块。CSS兼容性总结怪异模式浏览器用标准模式和怪异模式这两种方法来解析网页。在标准模式中content-box盒模型下，网页元素width= padding+border+width怪异模式中border-box盒模型下：网页元素width=width（已包含padding、border）（/box-sizing/ ）演示例子。我们推荐使用标准模式。DTD在 HTML5 中:!DOCTYPE html漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中（包括IE 6、IE 7、IE 8）就会触发怪异模式为了避免怪异模式给我们带来不必要的麻烦，我们要养成书写DTD声明的好习惯。IE的CSS hackCSS hack的目的就是使你的CSS代码兼容不同的浏览器。如：有个div class=test，要求在IE 6下width为60px，在IE7下width为70px，在IE 8下width为80px。 用样式属性前辍法：“_”只在IE 6下生效，“*”在IE 6和IE 7下生效png图片IE 6下对png的透明支持并不好,本该是透明的地方，在IE 6下会显示为浅蓝色，如下图所示：在IE7、IE 8和Firefox下的效果如图：可以使用IE下私有的滤镜功能来解决这个问题script language=JavaScript function correctPNG() // correctly handle PNG transparency in Win IE 5.5 6. { var arVersion = navigator.appVersion.split(MSIE) var version = parseFloat(arVersion[1]) if ((version = 5.5) (document.body.filters)) { for(var j=0; jdocument.images.length; j++) { var img = document.images[j] var imgName = img.src.toUpperCase() if (imgName.substring(imgName.length-3, imgName.length) == PNG) { var imgID = (img.id) ? id= + img.id + : var imgClass = (img.className) ? class= + img.className + : var imgTitle = (img.title) ? title= + img.title + : title= + img.alt + var imgStyle = 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 var strNewHTML = span + imgID + imgClass + imgTitle + style=\ + width: + img.width + px; height: + img.height + px; + imgStyle + ; + filter:progid:DXImageTransform.Microsoft.AlphaImageLoader + (src=\ + img.src + \, sizingMethod=scale);\/span img.outerHTML = strNewHTML j = j-1 } } }} window.attachEvent(onload, co