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

程序员文章站 2022-11-05 08:44:15

前言现今市面上的浏览器种类繁多，而前端开发过程中所用到的一些功能属性不可能兼容所有浏览器，因此就需要解决浏览器的兼容问题。（PS：死亡要求——兼容IE浏览器a(ﾉ=▼ω▼=)ﾉ┴─┴）......

前言

现今市面上的浏览器种类繁多，而前端开发过程中所用到的一些功能属性不可能兼容所有浏览器，因此就需要解决浏览器的兼容问题。（PS：死亡要求——兼容IE浏览器(ﾉ=▼ω▼=)ﾉ┴─┴）。

一、常见浏览器内核

1.Trident内核

说起Trident，大部分人都会觉得比较陌生，但提起IE浏览器基本上是家喻户晓。由于该内核被包含在全世界最高的使用率的操作系统中，即为Windows操作系统，所以我们又经常把它称之为IE内核。
由于IE本身的“垄断性”（虽然名义上IE并非垄断）而使得Trident内核的长期一家独大，微软很长时间都并没有更新Trident内核，这导致了两个后果——①Trident内核曾经几乎与W3C标准脱节（2005年）；②是Trident内核的大量Bug等安全性问题没有得到及时解决，然后加上一些致力于开源的开发者和一些学者们公开自己认为IE浏览器不安全的观点，也有很多用户转向了其他浏览器，Firefox和Opera就是这个时候兴起的。

补充：IE从版本11开始，初步支持WebGL技术。IE8的JavaScript引擎是Jscript，IE9开始用Chakra，这两个版本区别很大，Chakra无论是速度和标准化方面都很出色。

2.Gecko内核

Gecko（Firefox内核）：Netscape6开始采用的内核，后来的Mozilla FireFox（火狐浏览器）也采用了该内核，Gecko的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。因为这是个开源内核，因此受到许多人的青睐，Gecko内核的浏览器也很多，这也是Gecko内核虽然年轻但市场占有率能够迅速提高的重要原因。
此外Gecko也是一个跨平台内核，可以在Windows、 BSD、Linux和Mac OS X中使用。

3.Blink内核

Blink是一个由Google和Opera Software开发的浏览器排版引擎，Google计划将这个渲染引擎作为Chromium计划的一部分，并且在2013年4月的时候公布了这一消息。这一渲染引擎是开源引擎WebKit中WebCore组件的一个分支，并且在Chrome（28及往后版本）、Opera（15及往后版本）和Yandex浏览器中使用。

4.Webkit内核

Webkit（Safari内核，Chrome内核原型，开源）:它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核。 Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎，均是从KDE的KHTML及KJS引擎衍生而来，它们都是*软件，在GPL条约下授权，同时支持BSD系统的开发。所以Webkit也是*软件，同时开放源代码。在安全方面不受IE、Firefox的制约，所以Safari浏览器在国内还是很安全的。

5.Presto内核（已废弃）

~~Presto（Opera前内核）~~ ： Opera12.17及更早版本曾经采用的内核，现已停止开发并废弃，该内核在2003年的Opera7中首次被使用，该款引擎的特点就是渲染速度的优化达到了极致，然而代价是牺牲了网页的兼容性。实际上这是一个动态内核，与前面几个内核的最大的区别就在脚本处理上。

浏览器	内核
IE浏览器	Trident内核，也是俗称的IE内核
Chrome浏览器（谷歌）	统称Chromium内核或Chrome内核。以前是Webkit内核，现在是Blink内核
Firefox浏览器（火狐）	Gecko内核，俗称Firefox内核
Safari浏览器	Webkit内核
Opera浏览器（欧朋）	最初是自己的Presto内核，后来是Webkit内核，现在是Blink内核
360浏览器	IE+Chrome双内核
猎豹浏览器	IE+Chrome双内核
UC浏览器	Trident（兼容模式）+Webkit（高速模式）
搜狗浏览器	Trident（兼容模式）+Webkit（高速模式）
百度浏览器	IE内核
2345浏览器	IE内核
QQ浏览器	Trident（兼容模式）+Webkit（高速模式）
遨游浏览器	Trident（兼容模式）+Webkit（高速模式）
世界之窗浏览器	最初为IE内核，2013年采用IE+Chrome双内核

二、常见兼容性问题

1.不同浏览器的默认margin和padding不一致

解决方案
在style样式里添加如下代码：

<style>
*{
   //在VSCode编辑器中，输入：m0+p0，按enter键就能快速补全
   margin:0;
   padding:0;
 }
 </style>

【PS】：这是最常见也是最容易解决的兼容性问题了~

2.图片的默认间距不一致

解决方案
使用float属性为img布局

3.获取视口的宽高

解决方案
①大部分浏览器：

var w = window.innerWidth;
var h = window.innerHeight;

②IE8、7、6、5：

var w = document.documentElement.clientWidth;
var h = document.documentElement.clientHeight;
//或者
var w = document.body.clientWidth;
var h = document.body.clientHeight;

4.SVG（兼容IE8）

解决方案
☞标签降级

<svg width="96" height="96">
   <image xlink:herf="svg.svg" src="svg.png" width="96" height="96" />
</svg>

【PS】：但是呈现的效果没那么好（兼容你x的IE8(▼皿▼#) ~）
【前端兼容性】常见的浏览器兼容问题及解决方案
ahhhh，(ノ￣▽￣)开个玩笑~~

5.Canvas（兼容IE8）

canvas是H5新增的元素，IE 从 IE9 开始支持canvas，那么如何兼容 IE8 呢？

解决方案
①添加对HTML5的支持（去网上下载一个html5.js，很容易搜到的~）

<script src="../html5.js" type="text/javascript"></script>

②添加对canvas的支持（下载excanvas_r3.zip）

<script src="../excanvas.compiled.js" type="text/javascript"></script>

③支持CSS3（http://css3pie.com）

<style>
     #nav{
         //一些样式...
         -webkit-border-radius: 10px; //兼容Safari和Chrome浏览器
         -moz-border-radius: 10px; //兼容Firefox浏览器
         behavior: url(PIE.htc);
     }
</style>

6.IE9以下不能用opacity

解决方案
使用filter：

<style>
    .box{
        // 一点其他的样式...
        background-color:#000;  
        opacity:0.5; 
        -moz-opacity:0.5; //兼容Firefox浏览器 
        filter:alpha(opacity = 50);
        filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50); //IE6
    }   
</style>

7.文字大小

字体大小在不同浏览上不一致。例如font-size:14px，在 IE 中的实际行高是16px，下面有3px留白；在 Firefox 中的实际行高是17px，下面有3px留白，上边1px留白；在 opera 中就更不一样了。

解决方案
统一指定行高 line-height：

<style>
    html{
       font-size: 14px;
       line-height: 14px;
    }
</style>

8.绑定事件IE9才支持

解决方案
addEventListener属性 & attachEvent属性：

function eventName(obj,eventStr,callback){
     if(obj.addEventListener){  //大部分浏览器有这个属性
          //大部分浏览器兼容方式
          obj.addEventListener(eventStr,callback,false);
     }else{
          //IE8 及以下
          obj.attachEvent("on"+eventStr,function(){  //第一个参数事件类型要加“on”前缀
                 callback.call(obj);  //统一this的值
          });
     }
}

【PS】
①addEventListener事件回调函数中的 this 指向绑定事件的对象；attachEvent事件回调函数中的 this 指向的是window，需要统一两个方法的this。
②addEventListener有第三个参数，true表示事件工作在捕获阶段，false为冒泡阶段（默认）；而attachEvent只能工作在冒泡阶段。
③解除事件方法标准方法removeListen()；在IE8中，对应使用detachEvent()；注意，和上面的注册方法要一一对应。
④阻止默认事件标准方法event.preventDefault()；在IE8中，使用 event.returnValue = false;
⑤阻止冒泡的方法event.stopPropagation()；在IE8中，使用 event.cancelBubble = true;
⑥老版本 IE 中，事件函数内部的 this 不是被监听元素本身，而是 window，故应该使用 call 改变 this 指向。
⑦addEventLister的第一个参数事件类型是不加“on”前缀的；而attachEvent中需要加“on”前缀;

9.cursor:hand 显示手型

Firefox、Safari不支持hand，但IE支持pointer。

解决方案
统一使用 cursor:pointer;

10.const问题

Firefox下，可以使用const关键字来定义常量；IE下，只能使用var关键字来定义常量。

解决方案
统一使用var关键字来定义常量。

11.event.srcElement问题

IE下，event对象有srcElement属性，但是没有target属性；Firefox下，event对象有target属性，但是没有srcElement属性。

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

12.Firefox不支持innerText

解决方案
使用textContent：

if(navigator.appName.indexOf("Explorer") > -1){
     document.getElementById('element').innerText = "text";
}else{
     document.getElementById('element').textContent = "text";
}

13.获取鼠标在页面上的位置

IE8之前没有完整的位置属性。

解决方案

//Firefox支持属性 pageX 与 pageY 属性，这两个属性已经把页面滚动计算在内了
//在 Chrome 可以通过document.body.scrollLeft，document.body.scrollTop计算出页面滚动位移
//而在 IE 下可以通过document.documentElement.scrollLeft ，document.documentElement.scrollTop 
function getMousePos(event) { 
      var e = event || window.event; 
      var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft; 
      var scrollY = document.documentElement.scrollTop || document.body.scrollTop; 
      var x = e.pageX || e.clientX + scrollX; 
      var y = e.pageY || e.clientY + scrollY; 
      return { 'x': x, 'y': y }; 
}

14.获取键盘事件的键值

谷歌：对event.keyCode、event.charCode和event.which都兼容。
火狐：对event.keyCode部分键值有效（如上下左右键），对数字键、字母键无效；
event.which部分键值有效（如字母、数字键），对上下左右键、PgUp（33）、PgDn（34）键无效；
event.charCode部分键值有效（如字母、数字键），对enter键、上下左右键、PgUp（33）、PgDn（34）键无效。
IE：IE8及以下对event.charCode无效，event.keyCode和event.which能获取大部分。
解决方案

var keyCode = e.keyCode || e.which;

15.IE6不支持min-height

解决方案

<style>
    .box{
        min-height: 200px;
        _height: 200px;  //在IE6、IE5显示正常，但不能过W3C验证
        overflow:visible;  //内容超出时显示
    }
</style>

16.IE兼容CSS3的background-size属性

IE8以下不支持CSS3的background-size属性。

解决方案
①使用滤镜：

<style>
   .box{
    background: url(../images/01.png) no-repeat center;
    background-size: cover;
    -webkit-background-size: cover; //兼容Safari和Chrome
    -moz-background-size: cover; //兼容Firefox
    -o-background-size: cover;  //兼容Opera，但是貌似不支持
    filter: progid: DXImageTransform.Microsoft.AlphaImageLoader( src='../images/01.png', sizingMethod='scale');
    -ms-filter: progid: DXImageTransform.Microsoft.AlphaImageLoader( src='../images/01.png', sizingMethod='scale'); 
</style>

②通过htc文件（background-size polyfill）:

<style>
.box{
    background-size: cover;
    behavior: url(../backgroundsize.min.htc);
    -ms-behavior: url(../backgroundsize.min.htc);
}
</style>

总结

实际生活中的兼容性问题还有很多，先记到这里~
另：部分内容参考——https://www.cnblogs.com/angel648/p/11392262.html

本文地址：https://blog.csdn.net/m_sy530/article/details/109248142

相关标签：前端相关前端 css3 html5 javascript

上一篇：超详细的vue组件间通信总结

下一篇： iOS14哪个版本最好用 iOS14.7.1值得升级吗？

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

常见浏览器兼容

前言

一、常见浏览器内核

1.Trident内核

2.Gecko内核

3.Blink内核

4.Webkit内核

5.Presto内核（已废弃）

二、常见兼容性问题

1.不同浏览器的默认margin和padding不一致

2.图片的默认间距不一致

3.获取视口的宽高

4.SVG（兼容IE8）

5.Canvas（兼容IE8）

6.IE9以下不能用opacity

7.文字大小

8.绑定事件IE9才支持

9.cursor:hand 显示手型

10.const问题

11.event.srcElement问题

12.Firefox不支持innerText

13.获取鼠标在页面上的位置

14.获取键盘事件的键值

15.IE6不支持min-height

16.IE兼容CSS3的background-size属性

总结

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

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

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

浏览器兼容性问题及常见的解决方法_html/css_WEB-ITnose

web前端关于浏览器兼容性问题的解决方案

web前端关于浏览器兼容性问题的解决方案

浏览器兼容性问题及常见的解决方法_html/css_WEB-ITnose