本篇介绍了CSS3与页面布局学习总结——浏览器兼容与前端性能优化，具体如下：

一、浏览器兼容

1.1、概要

世界上没有任何一个浏览器是一样的，同样的代码在不一样的浏览器上运行就存在兼容性问题。不同浏览器其内核亦不尽相同，相同内核的版本不同，相同版本的内核浏览器品牌不一样，各种运行平台还存在差异、屏幕分辨率不一样，大小不一样，比例不一样。兼容性主要考虑三方面：

1)、CSS兼容

2)、JavaScript兼容

3)、HTML兼容

这三类也是前端的主要组成部分，都存在一定的兼容性问题，知己知彼，百战百胜，我们先了解浏览器的发动机—内核。

多年前我们一直为IE6兼容烦恼，为它没少加班；盼走了IE6现在又出现了IE8，看来兼容没有尽头...

1.2、浏览器内核

Trident

Microsoft公司浏览器内核，IE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）及许多品牌浏览器的内核。其中部分浏览器的新版本是“双核”甚至是“多核”，其中一个内核是Trident，然后再增加一个其他内核。

Gecko

Firefox内核，Netscape6开始采用的内核，后来的Mozilla FireFox(火狐浏览器) ，Mozilla Firefox、Mozilla SeaMonkey、waterfox（Firefox的64位开源版）、Iceweasel、Epiphany（早期版本）、Flock（早期版本）、K-Meleon使用的内核。

Presto

Opera前内核，已废弃，Opera现已改用Google Chrome的Blink内核。

Webkit

Safari内核,Chrome内核原型,开源，它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核。 傲游浏览器3、Apple Safari、(Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器

Blink

Blink是一个由Google和Opera Software开发的浏览器排版引擎，Google计划将这个渲染引擎作为Chromium计划的一部分，这一渲染引擎是开源引擎WebKit中WebCore组件的一个分支，并且在Chrome（28及往后版本）、Opera（15及往后版本）。

edge

微软专门为新IE打造的引擎，速度快，目前已经基于此引擎开发了浏览器，目前IE11使用该内核，估计以后微软的新浏览器会继续采用该内核。

1.3、浏览器市场份额（Browser Market Share）

能过浏览器的市份额我们可以在处理浏览器兼容性时会更加关注市场份额高的浏览器，适当的时候可以放弃市场份额占有量小的浏览器。

国际：

查询地址：https://www.netmarketshare.com

2016年12月PC浏览器数据

2016年12月平板+移动数据

2016年浏览器份额变化

国内：

查询地址：http://tongji.baidu.com/data/browser

从上图可以看出，我们在针对PC Web开发时需要重点关注Chrome、IE浏览器，开发Mobile项目时要重点关注Chrome浏览器与Safari。

1.4、兼容的一般标准

1)、在不同的主流的浏览器上表现效果一致

2)、能适应不同的屏幕大小

3)、能适应不同的分辨率与色彩深度

浏览器兼容在线测试：

http://browsershots.org/

http://browsershots.org/

IE测试可以安装：IETester在本地测试。

 1.5、CSS Reset

每种浏览器都有一套默认的样式表，即user agent stylesheet，网页在没有指定的样式时，按浏览器内置的样式表来渲染。这是合理的，像word中也有一些预留样式，可以让我们的排版更美观整齐。不同浏览器甚至同一浏览器不同版本的默认样式是不同的。但这样会有很多兼容问题，CSSReset可以将所有浏览器默认样式设置成一样。

如全局重置*{ padding: 0; margin: 0; border:}虽然能全部重置，但由于性能较低，不推荐使用。因为*需要遍历整个DOM树，当页面节点较多时，会影响页面的渲染性能。这个网站http://cssreset.com/有最新的CSSReset提供给大家参考。

Normalize (号称是CSS reset的替代方案，保留了一些内置的样式，并不是清除所有)

http://nicolasgallagher.com/about-normalize-css/

https://github.com/necolas/normalize.css

示例：请看第2章的内容

1.6、CSS Hack

CSS Hack就是针对不同的浏览器或不同版本浏览器写特定的CSS样式达到让浏览器兼容的过程。

1.6.1、条件注释法

IE条件注释（Conditional comments）是IE浏览器私有的代码，在其它浏览器中被视为注释。

gt : greater than，选择条件版本以上版本，不包含条件版本 >

lt : less than，选择条件版本以下版本，不包含条件版本 <

gte : greater than or equal，选择条件版本以上版本，包含条件版本>=

lte : less than or equal，选择条件版本以下版本，包含条件版本 <=

! : 选择条件版本以外所有版本，无论高低

*只有IE浏览器认识条件注释、其它浏览器会跳过

示例：

效果：

 IE8

chrome

ie6

 1.6.2、样式内属性标记法

在CSS样式的属性名前或值后面添加特殊的字符让不同的浏览器解析。

http://browserhacks.com/在线查询， 这一个功能强大的提供各种针对性兼容办法的网站，非常实用。

“-″下划线是IE6专有的hack

“\9″ IE6/IE7/IE8/IE9/IE10都生效

“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack

“\9\0″ 只对IE9/IE10生效，是IE9/10的hack

这里以IE6双边距问题为例。

代码：

效果：

 1.6.3、选择器前缀法

*html *前缀只对IE6生效

*+html *+前缀只对IE7生效

@media screen\9{...}只对IE6/7生效

@media \0screen {body { background: red; }}只对IE8有效

@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效

@media screen\0 {body { background: green; }} 只对IE8/9/10有效

@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效

《hack速查表》：

hack速查表
建议：以标准浏览器为准书写代码，如遇到兼容问题，尝试其他方法解决问题，在万不得已怕情况下，采用HACK解决。
以下是我总结的HACK书写方法:
浏览器：仅限IE6+，FF，safari,chrome,opera;(截止到2011.10.12非IE均为最新版本)。
测试环境：windows系统;
DOCTYPE: .
标志符
示例
IE6
IE7
IE8
IE9
FF
OP
SA
CH
*
.eq {*color:#000;}
Y
Y
N
N
N
N
N
N
_
.eq {_color:#000;}
Y
N
N
N
N
N
N
N
+
.eq {+color:#000;}
Y
Y
N
N
N
N
N
N
-
.eq {-color:#000;}
Y
N
N
N
N
N
N
N
>
.eq {>color:#000;}
Y
Y
N
N
N
N
N
N
\0
.eq {color:#000\0;}
N
N
Y
Y
N
Y
N
N
\9
.eq {color:#000\9;}
Y
Y
Y
Y
N
N
N
N
\9\0
.eq {color:#000\0;}
N
N
N\Y
Y
N
N
N
N
:root .xx{xxx:xxx\9;}
:root .eq {color:#a00\9;}
N
N
N
Y
N
N
N
N
*+
.eq {*+color:#000;}
Y
Y
N
N
N
N
N
N
*-
.eq {*-color:#000;}
Y
N
N
N
N
N
N
N
*html
*html .eq {color:#000;}
Y
N
N
N
N
N
N
N
*+html
*+html .eq {color:#000;}
N
Y
N
N
N
N
N
N
html*
html* .eq {color:#000;}
Y
Y
N
N
N
N
N
N
[;
.eq {color:red;[;color:blue;}
Y
Y
N
N
N
N
Y
Y
html>body
html>body .eq {color:blue;}
N
Y
Y
Y
Y
Y
Y
Y
html>/**/body
html>/**/body .eq {color:blue;}
N
N
Y
Y
Y
Y
Y
Y
html/**/>body
html/**/>body .eq {color:blue;}
N
Y
Y
Y
Y
Y
Y
Y
@media all and (min-width:0px){}
@media all and (min-width:0px){.eq {color:#000;}}
N
N
N
Y
Y
Y
Y
Y
*:first-child+html
*:first-child+html .eq {color:blue;}
N
Y
N
N
N
N
N
N
*:first-child+html{} *html
*:first-child+html{} *html .eq {color:blue;}
Y
N
N
N
N
N
N
N
@-moz-document url-prefix(){}
@-moz-document url-prefix(){ .eq {color:blue;}}
N
N
N
N
Y
N
N
N
@media screen and (-webkit-min-device-pixel-ratio:0){}
@media screen and (-webkit-min-device-pixel-ratio:0){.eq {color:blue;}}
N
N
N
N
N
N
Y
Y
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){}
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){.eq {color:blue;}}
N
N
N
N
N
Y
N
N
body:nth-of-type(1)
body:nth-of-type(1) .eq {color:blue;}
N
N
N
Y
Y
Y
Y
Y
标志符
示例
IE6
IE7
IE8
IE9
FF
OP
SA
CH
FF:firefox; OP:opera; SA:safari; CH:chrome; 
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                

                

                

                                            
上一篇：用CSS设定一个元素半透明css实现背景半透明文字不透明的效果示例纯css实现背景图片半透明内容不透明的方法利用CSS3制作简单的3d半透明立方体图片展示css3实现的半透明遮罩lightbox效果源码纯CSS实现多级半透明效果菜单代码 纯CSS实现鼠标放上滑动出半透明效果的文字说明(新手小白 必看)
                                                                
下一篇：利用CSS实现书签效果实例源码CSS3+DIV实现漂亮的动画彩色标签纯JS和CSS3炫酷桌面便签贴纸特效源码CSS基础教程十九之CSS图文混排，图像签名，多图拼接和图片特效 纯CSS实现Tab切换标签效果代码用CSS中的map标签制作单图多区域点击的示例HTML5 SVG和CSS3实现的表单浮动标签特效源码css3基于svg实现的地球旋转动画特效源码用CSS设定一个元素半透明Css3新特性应用之视觉效果实例纯css3实现的圆形从中心向四周扩散动画效果源码