浏览器的兼容性

最新推荐文章于 2021-11-18 11:13:24 发布

是Ryan吖

最新推荐文章于 2021-11-18 11:13:24 发布

阅读量166

点赞数

分类专栏：前端-其他

本文链接：https://blog.csdn.net/weixin_45497246/article/details/102672641

版权

前端-其他专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

来自hr的灵魂拷问： "你对浏览器的兼容性有了解过吗？"

回答这个问题的正确姿势＜（＾－＾）＞解锁√

浏览器的兼容性，无非就仨：

样式兼容性（css）
交互兼容性（javascript）
浏览器 hack

Let’s talk about it !!!

1. 样式兼容性（css）

元凶？

浏览器种类多、版本多、更新换代快

不同厂商浏览器甚至同一厂商不同版本的浏览器，对css的解析不同导致浏览器和css的渲染规范不兼容，表现为——同样的代码在不同浏览器的显示效果不同

咋整？

在css编码过程中加入兼容性代码！

在html文档的head标签中加入如下meta标签
对于360的双核浏览器，浏览器会自动启动webkit内核渲染

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<!--IE=edge，使用最高界别模式显示内容
    chrome=1，谷歌的外挂插件Google Chrome Frame
    使用IE浏览网页时实际上是使用Chrome浏览器内核渲染
    最低支持IE6，但前提是客户端已经安装GCF-->

通过 Normalize.css 抹平差异

它是一个很小的CSS文件，在默认的HTML元素样式上提供跨浏览器的高度一致性
也可以定制自己的 reset.css，例如通过通配符*选择器，全局重置样式

 * {
      margin: 0;
      padding: 0;
    }

加浏览器前缀

加上浏览器前缀的css属性，会被该浏览器识别并渲染出来，即可实现属性的兼容性
有浏览器前缀的css属性应该放在没有的css属性之后，以保证hack起作用（CSS hack的目的就是使CSS代码兼容不同的浏览器）

内核	主要代表的浏览器	前缀
Trident	IE浏览器	-ms
Gecko	Firefox	-moz
Presto	Opera	-o
Webkit	Chrome和Safari	-webkit

2. 交互兼容性（javascript）

事件兼容的问题，通常需要封装一个适配器的方法，过滤事件绑定、移除、冒泡阻止以及默认事件行为处理
new Date()构造函数的使用方法

使用’2018-07-05’，无法被各个浏览器正确生成日期对象

正确的用法是’2018/07/05’
获取 scrollTop 通过 document.documentElement.scrollTop 兼容非chrome浏览器

 var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;

3. 浏览器 hack（也就是CSS hack）

滥用hack会导致浏览器更新之后产生更多的兼容性问题

不推荐使用CSS hack来解决兼容性问题

CSS hack是因为现有浏览器对标准的解析不同，为了兼容各浏览器，所采用的一种补救方法。
CSS hack是一种类似作弊的手段，（利用浏览器的兼容性差异）以欺骗浏览器的方式达到兼容的目的

写CSS hack需要遵循以下三条原则：

有效（能够通过 Web 标准的验证）
只针对太古老的/不再开发的/已被抛弃的浏览器，而不是目前的主流浏览器
代码要丑陋（让人记住这是一个不得已而为之的 hack，时刻要想办法去掉它）

CSS Hack大致有3种表现形式：

CSS类内部Hack

主要针对类内部Hack，比如：
- IE6能识别下划线"_“和星号” * "
- IE7能识别星号" * “，但不能识别下划线”_"
- 而firefox两个都不能识别
选择器Hack
- IE6能识别*html .class{}
- IE7能识别*+html .class{}
- *:first-child+html .class{}
HTML头部引用(if IE)Hack

<!-- 快速判断 IE 浏览器版本 -->
 <!--[if IE 8]> ie8 <![endif]-->
 <!--[if IE 9]> ie9 浏览器 <![endif]-->

<!-- 判断是否是 Safari 浏览器 -->
 var isSafari = /a/.__proto__=='//';

<!-- 判断是否是 Chrome 浏览器 -->
 var isChrome = Boolean(window.chrome);