浏览器兼容性问题及解决方案

Posted 2021-01-11 zhaosijia----1234

所谓的浏览器兼容性问题，是指因为不同的浏览器对不同的代码有不同的解析，造成页面效果显示不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。

浏览器兼容性问题汇总JavaScript

1.event.srcElement问题

    问题说明：

   IE下，even对象有srcElement属性,但是没有target属性；

   标准浏览器下（如Firefox），even对象有target属性而没有srcElement属性。

   解决方法：使用srcObj = event.srcElement?event.srcElement:event.target;

                     或者var target = event.srcElement || event.target;

    还有var ev = ev || window.event;

2.盒子模型问题

   有两种和模型：IE盒子模型、标准W3C盒子模型。

   盒模型：内容（content）、填充（padding）、外边距（margin）、边框（border）。

   IE的content部分包含了border和padding

   解决办法：

   body.style{width:100px;border:1px;}

   IE的理解为box.width = 100

   标准浏览器理解为box.width = 100 + 1*2 = 102 //加上边框2px

   解决：div{ margin:30px!important; margin:28px;}

   注意这两个margin 的顺序不能写反，IE不能识别!important这个属性，但别的浏览器可以识别。所以在IE下其实解释成这样：div{margin:30px;margin: 28px;}

   重复定义的话按照最后一个来执行，所以不可以只写margin: xxpx!important;

3.双边距Bug问题，float引起的（IE6）

   解决：使用display:inline

4.超链接hover点击后失效

   解决：属性使用正确的书写顺序 link visited hover active

5.CSS透明，IE5-8不支持opacity

   解决：.opacity {

                     opacity: 0.6;

                     filter: alpha(opacity=60);  /*  for IE5-7 */

                     -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity = 60)";  /* for IE8 */

              }

6.IE6不支持PNG透明背景

   解决：IE6下使用gif图片

   png24的图片在IE6浏览器上出现背景，解决：做成png8