- 浏览器样式加载不一致的原因
网页由浏览器通过浏览器内核对其进行解析,而不同的浏览器内核对网页的解析存在不同。因而,同一页面在不同的浏览器上显示存在差异。
(略:浏览器内核的不同导致页面渲染不一致) - 市面上的主要浏览器及其使用的浏览器内核
- 五大主流浏览器:
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方式一览