常见浏览器兼容
-
- 前言
- 一、常见浏览器内核
-
-
- 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属性
-
- 总结
前言 【前端相关|【前端兼容性】常见的浏览器兼容问题及解决方案】??现今市面上的浏览器种类繁多,而前端开发过程中所用到的一些功能属性不可能兼容所有浏览器,因此就需要解决浏览器的兼容问题。(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无论是速度和标准化方面都很出色。
??此外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双内核 |
- 解决方案
在style样式里添加如下代码:
>
*{
//在VSCode编辑器中,输入:m0+p0,按enter键就能快速补全
margin:0;
padding:0;
}
【PS】:这是最常见也是最容易解决的兼容性问题了~
2.图片的默认间距不一致
- 解决方案
使用float属性为img布局
- 解决方案
①大部分浏览器:
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)
- 解决方案
?标签降级
width="96" height="96">
【PS】:但是呈现的效果没那么好(兼容你x的IE8(▼皿▼#) ~)
文章图片
ahhhh,(ノ ̄▽ ̄)开个玩笑~~
5.Canvas(兼容IE8) ??canvas是H5新增的元素,IE 从 IE9 开始支持canvas,那么如何兼容 IE8 呢?
- 解决方案
①添加对HTML5的支持(去网上下载一个html5.js,很容易搜到的~)
="../html5.js" type="text/javascript">
??②添加对canvas的支持(下载excanvas_r3.zip)
="../excanvas.compiled.js" type="text/javascript">
??③支持CSS3(http://css3pie.com)
>
#nav{
//一些样式...
-webkit-border-radius: 10px;
//兼容Safari和Chrome浏览器
-moz-border-radius: 10px;
//兼容Firefox浏览器
behavior: url(PIE.htc);
}
6.IE9以下不能用opacity
- 解决方案
使用filter
:
>
.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
}
7.文字大小 ??字体大小在不同浏览上不一致。例如
font-size:14px
,在 IE 中的实际行高是16px,下面有3px留白;在 Firefox 中的实际行高是17px,下面有3px留白,上边1px留白;在 opera 中就更不一样了。- 解决方案
统一指定行高line-height
:
>
html{
font-size: 14px;
line-height: 14px;
}
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 = https://www.it610.com/article/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;
const
关键字来定义常量;IE下,只能使用var
关键字来定义常量。- 解决方案
统一使用var
关键字来定义常量。
srcElement
属性,但是没有target
属性;Firefox下,event对象有target
属性,但是没有srcElement
属性。- 解决方案
使用srcObj = event.srcElement ? event.srcElement : event.target;
- 解决方案
使用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
- 解决方案
>
.box{
min-height: 200px;
_height: 200px;
//在IE6、IE5显示正常,但不能过W3C验证
overflow:visible;
//内容超出时显示
}
16.IE兼容CSS3的background-size属性 ??IE8以下不支持CSS3的background-size属性。
- 解决方案
①使用滤镜:
>
.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='https://www.it610.com/images/01.png', sizingMethod='scale');
-ms-filter: progid: DXImageTransform.Microsoft.AlphaImageLoader( src='https://www.it610.com/images/01.png', sizingMethod='scale');
②通过htc文件(background-size polyfill):
>
.box{
background-size: cover;
behavior: url(../backgroundsize.min.htc);
-ms-behavior: url(../backgroundsize.min.htc);
}
总结 ??实际生活中的兼容性问题还有很多,先记到这里~
??另:部分内容参考——https://www.cnblogs.com/angel648/p/11392262.html
推荐阅读
- 程序员|ios微信抓https包提示证书安全警告解决办法
- javascript|微信H5页面前端开发,大多数人都会遇到的几个兼容性坑
- Leetcode3无重复字符的最长子串(滑动窗口解法)
- 软件测试|2022软件测试自学路线分享,附完整资料,自学也能拿高薪哟
- 小程序使用 canvas 给图片添加水印
- javascript|某数和某5秒-反混淆动态注入调试的一种方案
- JavaScript|JavaScript实现“双11”秒杀,你也可以
- 前端|记录一次Vue3.0引入ElementPlus之后样式不生效的一个大坑
- javascript|web前端必备的 JavaScript 基础知识梳理总结