怎么解决浏览器的兼容性问题？css hack是什么？

Posted 2021-04-09 前端简书

浏览器的兼容性问题包括两个方面：

第一种：不同浏览器之间的问题。

第二种：ie浏览器不同版本之间的兼容性问题。

具体做法：

1.首先引入初始化的css（css reset），保证消除不同浏览器之间一些默认样式的细微差别。

2.针对不同的浏览器的做法:

目前市场上的浏览器的内核主要分为四种，分别是：

Trident内核：主要代表为IE浏览器
Gecko内核：主要代表为Firefox
Presto内核：主要代表为Opera
Webkit内核：主要代表为Chrome和Safari

针对这些不同的内核，css3的一些属性需要加上对应的前缀。

Trident内核：前缀为-ms

Gecko内核：前缀为-moz

Presto内核：前缀为-o

Webkit内核：前缀为-webkit

例如：

.box{

-webkit-transform:rotateY(0deg);

-moz-transform:rotateY(0deg);

-ms-transform:rotateY(0deg);

-o-transform:rotateY(0deg);

transform:rotateY(0deg);

}

3.针对ie浏览器的不同版本，用css hack来解决；

下边主要说一下什么是css hack；

css hack原理：使用css样式属性的优先级来解决兼容性问题。

分类：

a). css类内部hack；

通过 属性前缀或值后缀 的方式来解决兼容性

 

+ : 被IE6，IE7识别

- : 被IE6 识别

+，-如果同时出现的话，+只针对IE7，-只针对IE6

 

注意：

IE7的兼容代码 要在上

IE6的兼容代码 要在下

b).css选择器hack；

    

在选择器前加上某些浏览器能识别的前缀

div{

 

}

 

*前缀：IE6识别

*+前缀：IE7识别

 

*div{}

*+div{}

c).css头部引用hack；

1、原理

通过IE条件注释 解决兼容性问题

IE浏览器会根据一个if条件判断，判断指定的内容是要被解析还是被注释

 

2、语法

<!--[if 条件 IE 版本]>

内容

<![endif]-->

 

版本：6 ~ 10 数字

条件：

1、gt

大于指定版本的浏览器

2、gte

大于等于指定版本的浏览器

3、lt

小于指定版本的浏览器

4、lte

小于等于指定版本的浏览器

5、!

除条件版本以外的其他版本浏览器

ex:

<!--[if gt IE 6]>

该段内容只能在 IE6以上版本的浏览器中显示

<![endif]-->

 

<!--[if IE 8]>

该段内容只能在IE8中显示

<![endif]-->