0
0

前端常见浏览器兼容性问题解决方案

摘要：

不同浏览器的内核不尽相同，所以各个浏览器对网页的解析存在一定的差异。
浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎
所以浏览器兼容性问题一般指：css兼容、js兼容

现在主要的浏览器及其内核：

Chrome ：之前Webkit，已改Blink内核

FireFox：Gecko

Safari：Webkit

IE：Trident

Opera：现已改用Google Chrome的Blink内核

一、css兼容

1. 不同浏览器的标签默认的margin和padding不同

问题症状： 随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。

**碰到频率: **100%

解决方案：

1、CSS里 *{margin:0;padding:0;} 但是性能不好
2、引入reset.css样式重置；
备注： 这个是最常见的也是最易解决的一个浏览器兼容性问题，所有的CSS文件开头都会用样式重置各个标签的内外补丁是0

2. css3新属性，加浏览器前缀兼容早期浏览器

  1. -moz-

/* 火狐浏览器 */

  1. -webkit-

/* Safari, 谷歌浏览器等使用Webkit引擎的浏览器 */

  1. -o-

/* Opera浏览器(早期) */

  1. -ms-

/* IE */

需要加前缀的CSS属性：

定义关键帧动画 @keyframes
css3中的变形（transform）、过渡(transtion)、动画(animation)
border-radius 圆角
box-shadow 盒子阴影
flex 弹性布局
....

具体方法：

  2. .myClass {
  3.     -webkit-animation-name: fadeIn;
  4.     -moz-animation-name: fadeIn;
  5.     -o-animation-name: fadeIn;
  6.     -ms-animation-name: fadeIn;
  7.     animation-name: fadeIn;  /* 不带前缀的放到最后 */
  8. }
  9. /* 复杂属性 keyframes */
  10. @-webkit-keyframes fadeIn {
  11.     0% { opacity: 0; } 100% { opacity: 0; }
  12. }
  13. @-moz-keyframes fadeIn {
  14.     0% { opacity: 0; } 100% { opacity: 0; }
  15. }
  16. @-o-keyframes fadeIn {
  17.     0% { opacity: 0; } 100% { opacity: 0; }
  18. }
  19. @-ms-keyframes fadeIn {
  20.     0% { opacity: 0; } 100% { opacity: 0; }
  21. }
  22. /* 不带前缀的放到最后 */
  23. @keyframes fadeIn {
  24.     0% { opacity: 0; } 100% { opacity: 0; }
  25. }

3. 块属性标签float后，又有横行的margin情况下，IE 浏览器margin加倍的问题

问题症状: 常见症状是IE6中后面的一块被顶到下一行

解决方案： 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;

具体操作：

  1. <divid=”imfloat”>
  2. 相应的css为
  3. # imfloat{
  4. float:left;
  5. margin:5px;//IE下理解为10px
  6. display:inline;//IE下再理解为5px}

备注： 我们最常用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。

4. 设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度

问题症状： 设置div高度小于10px，IE6、7和遨游里div的高度，超出自己设置的10px.

**碰到频率： **60%

解决方案：

1、给超出高度的标签设置overflow:hidden;
2、或者设置行高line-height 小于你设置的高度。
备注： 这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。

5. 行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug

问题症状： IE6里的间距比超过设置的间距

碰到几率： 20%

解决方案： 在display:block;后面加入display:inline;display:table;

备注： 行内属性标签，为了设置宽高，我们需要设置display:block;(除了input/img标签比较特殊)。在用float布局并有横向的margin后，在IE6下，他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe

6. IE浏览器div最小宽度和高度的问题

问题症状： IE浏览器div最小宽度和高度不生效

IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。

比如要设置背景图片，这个最小宽度是比较重要的。要解决这个问题，可以这样：

  1. #box{
  2.   width: 80px;
  3.   height: 35px;
  4.   }
  5. html>body #box{
  6.  width: auto;
  7.  height: auto; 
  8.  min-width: 80px; 
  9.  min-height: 35px;
  10.  }

7. 超链接访问过后hover样式就不出现的问题

被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序: 

  1. L-V-H-A

解决如下:

  1. <style type="text/css">
  3. a:link {}
  4. a:visited {}
  5. a:hover {}
  6. a:active {}
  8. </style>

8. 图片默认有间距

问题症状： 几个img标签放在一起的时候，有些浏览器会有默认的间距，通配符清除间距也不起作用。

碰到几率： 20%

解决方案： 使用float属性为img布局(所有图片左浮)

备注： 因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float。

9. css hack解决浏览器兼容性

不同浏览器，识别不同的样式，csshack本身就是处理浏览器兼容的。
下面是css hack写法：

  1. background-color:yellow0; 0 是留给ie8的
  2. +background-color:pink;   + ie7定了；
  3. _background-color:orange; _专门留给神奇的ie6；

二、js兼容

1. 事件绑定

IE: 

  1. dom.attachEvent()

;
标准浏览器： 

  1. dom.addEventListener(‘click',function(event){},false)

;

标准浏览器采用事件捕获的方式对应IE的事件冒泡机制（即标准由最外元素至最内元素或者IE由最内元素到最外元素）最后标准方亦觉得IE这方面的比较合理，所以便将事件冒泡纳入了标准，这也是addEventListener第三个参数的由来，而且事件冒泡作为了默认值第三值默认false，表示事件冒泡方式。

如果浏览器不支持 addEventListener()方法, 你可以使用 attachEvent()方法替代。

以下实例演示了跨浏览器的解决方法：

  1. var x = document.getElementById("myBtn");
  2. if (x.addEventListener) {   //所有主流浏览器，ie9+
  3.     x.addEventListener("click", myFunction);
  4. } else if (x.attachEvent) {      // IE 8 及更早 IE 版本
  5.     x.attachEvent("onclick", myFunction);
  6. }

2. event事件对象问题

  1.     document.onclick=function(ev){//谷歌火狐的写法，IE9以上支持，往下不支持；
  2.         var e=ev;
  3.         console.log(e);
  4.     }
  5.     document.onclick=function(){//谷歌和IE支持，火狐不支持；
  6.         var e=event;
  7.         console.log(e);
  8.     }
  9.     document.onclick=function(ev){//兼容写法；
  10.         var e=ev||window.event;
  11.         var mouseX=e.clientX;//鼠标X轴的坐标
  12.         var mouseY=e.clientY;//鼠标Y轴的坐标
  13.     }

2. event.srcElement(事件源对象)问题
IE： 

  1. event

对象有

  1. srcElement

属性，但是没有

  1. target

属性；
Firefox: 

  1. event

对象有

  1. target

属性，但是没有

  1. srcElement

属性。
解决方法：

  1. srcObj = event.srcElement?event.srcElement:event.target;

3. 获取元素的非行间样式值：

IE: dom.currentStyle[‘width’] 获取元素高度
标准浏览器： 

  1. window.getComputedStyle(obj, null)['width'];

跨浏览器兼容解决方法：

  1.  // 获取元素属性值的兼容写法
  2.   function getStyle(obj,attr){
  3.       if(obj.currentStyle){
  4.          //兼容IE
  5.  　　　　　　obj.currentStyle[attr];
  6.           return obj.currentStyle[attr];
  7.       }else{
  8.          //非IE，
  9.  　　　　return window.getComputedStyle(obj, null)[attr]; 
  10.  　    }
  11.  　 }

4. 阻止事件冒泡传播：

  1. //js阻止事件传播，这里使用click事件为例
  2.     document.onclick=function(e){
  3.         var e=e||window.event;
  4.         if (e.stopPropagation) {
  5.             e.stopPropagation();//W3C标准
  6.         }else{
  7.             e.cancelBubble=true;//IE....
  8.         }
  9.     }

5. 阻止事件默认行为：

  1. //js阻止默认事件   一般阻止a链接href，form表单submit提交
  2.     document.onclick=function(e){
  3.         var e=e||window.event;
  4.         if (e.preventDefault) {
  5.             e.preventDefault();//W3C标准
  6.         }else{
  7.             e.returnValue='false';//IE..
  8.         }
  9.     }

6. ajax兼容问题

IE： ActiveXObject
其他： xmlHttpReuest

注意：在IE6以前不是用XMLHttpRequest创建的，所以我们要兼容ie6以前的浏览器要判断他有没有XMLHttpRequest()

跨浏览器兼容解决方法：

  1. <script>
  2.     window.onload = function(){
  3.         var oBtn = document.getElementById('btn');
  4.         oBtn.onclick = function(){
  5.             //1.创建ajax对象
  6.             //只支持非IE6浏览器
  7.             var oAjax = null;
  8.             if(window.XMLHttpRequest){
  9.                 oAjax = new XMLHttpRequest();                
  10.                 //alert(new XMLHttpRequest());
  11.             }else{
  12.                 //只支持IE6浏览器
  13.                 oAjax = new ActiveXObject("Microsoft.XMLHTTP");    
  14.             }
  15.             //2.连接服务器,这里加个时间参数,每次访问地址都不一样,浏览器就不用浏览器里的缓冲了,但
  16.             //    但服务器那端是不解析这个时间的
  17.             oAjax.open("get","a.txt?t=" + new Date().getTime(),true);
  18.             //3.发送
  19.             oAjax.send(null);        
  20.             //4.接受信息
  21.             oAjax.onreadystatechange = function(){
  22.                 //浏览器与服务器之间的交互,进行到哪一步了,当等于4的时候,代表读取完成了
  23.                 if(oAjax.readyState==4){
  24.                     //状态码,只有等于200,代表接受完成,并且成功了
  25.                     if(oAjax.status==200){
  26.                         alert("成功" + oAjax.responseText);    
  27.                     }else{
  28.                         alert("失败");    
  29.                     }    
  30.                 }    
  31.             };
  32.                 
  33.         };
  34.     };
  35. </script>
标签： 前端 css3 css
本文转载自: https://blog.csdn.net/2301_77456141/article/details/133097803
版权归原作者 说好不emo 所有， 如有侵权，请联系我们删除。
登录后发布评论

“前端常见浏览器兼容性问题解决方案”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？