前端实现浏览器CSS兼容
2020-06-15 本文已影响0人
夜天丶枫铭
- 浏览器样式加载不一致的原因
网页由浏览器通过浏览器内核对其进行解析，而不同的浏览器内核对网页的解析存在不同。因而，同一页面在不同的浏览器上显示存在差异。
（略：浏览器内核的不同导致页面渲染不一致） - 市面上的主要浏览器及其使用的浏览器内核
- 五大主流浏览器：
1.IE
2.Firefox
3.Safari
4.Opera
5.Google Chrome - 四大浏览器内核：
1.Trident
2.Gecko
3.Blink
4.Webkit - 浏览器与浏览器内核关系
| 浏览器名称 | 浏览器内核 | 私有属性 |
|---|---|---|
| IE浏览器 | Trident(也称IE内核) | -ms- |
| 火狐浏览器 | Gecko | -moz- |
| Safari | Webkit | -webkit- |
| Opera | Blink(基于Webkit) | -o- |
| Chrome | Blink(基于Webkit) | -webkit |
浏览器实现CSS兼容处理
- CSS样式初始化
- 推荐库：Normalize.css
- 浏览器私有属性
- -web kit- chrome\safari
- -moz- 火狐浏览器私有属性
- -ms- IE浏览器私有属性
- -o- opera浏览器私有属性
注：可通过插件解决
-
CSS hack
说明：针对不同浏览器甚至不同版本进行编写的CSS样式，称之为CSS hack。-
CSS类内部hack
注： 主要针对类内部hack，如：IE6能识别""和""，IE7能识别""，但不能识别""，firfox两个都不能识别。 -
选择器hack
-
| 标记 | IE6 | IE7 | IIE8 | FF | Opera | Safari |
|---|---|---|---|---|---|---|
| [*+><] | √ | √ | X | X | X | X |
| - | √ | X | X | X | X | X |
| \9 | √ | √ | √ | X | X | X |
| \0 | X | X | √ | X | √ | X |
| * +html .bb | X | √ | X | X | X | X |
bb{
height:32px;
background-color:#f1ee18;/*所有识别*/
background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}
@media screen and (-webkit-min-device-pixel-ratio:0){.bb{background-color:#f1ee18}}{} /*safari(Chrome) 有效 */
.bb, x:-moz-any-link, x:default{background-color:#00ff00;}/*IE7 firefox3.5及以下 识别 */
@-moz-document url-prefix(){.bb{background-color:#00ff00;}}/*仅firefox 识别*/
* +html .bb{background-color:#a200ff;}/* 仅IE7 识别 */
/*一个用于展示的class为bb的div标签*/
< div class ="bb"></ div >
+ **HTML头部引用（if IE）hack**
```
只在IE下生效
<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->
只在IE6下生效
<!--[if IE 6]>
这段文字只在IE6浏览器显示
<![endif]-->
只在IE6以上版本生效
<!--[if gte IE 6]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]-->
只在IE8上不生效
<!--[if ! IE 8]>
这段文字在非IE8浏览器显示
<![endif]-->
```
注：*IE浏览器版本，如6、7、8，但IE10及以上版本已将条件注释特性移除，使用时需注意*
+ hack的书写顺序（按浏览器）：FF IE7 IE6;
- Important在IE6里边不生效
3.为什么不推荐使用CSS hack来解决兼容性问题
CSS hack是因为现有浏览器对标准的解析不同，为了兼容各浏览器，所采用的一种补救方法。滥用hack会导致浏览器更新之后产生更多的兼容性问题。
- hack三大原则
- 有效
- 只针对太古老的/不再开发/已被抛弃的浏览器
- 代码要丑陋……让别人时刻记住想办法去掉它
参考资料
CSS hack技巧大全
CSS浏览器兼容性，最完整处理方案
史上最全的CSS hack方式一览
