CSS3浏览器兼容搜狗浏览器相关问题探讨 CSS3浏览器兼容注意事项：世界上浏览器存在兼容性问题，需考虑CSS、JavaScript、HTML兼容。了解浏览器内核，如Trident、Gecko、Presto、Webkit、Blink、edge等。关注浏览器市场份额，开发时重点关注Chrome、IE等。兼容标准包括在主流浏览器表现一致等。可通过CSSReset和CSSHack解决兼容问题，后者有条件注释法、样式内属性标记法、选择器前缀法等，还提供了相关查询网站。下面是小编精心整理编写的关于“ CSS3浏览器兼容搜狗浏览器相关问题探讨 ”的详细教程，请大家仔细阅览学习：

这次给大家带来CSS3的浏览器兼容问题，CSS3浏览器兼容的注意事项有哪些，下面就是实战案例，一起来看一下。

本篇介绍了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 SeaMonkey、waterfox（Firefox的64位开源版）、Iceweasel、Epiphany（早期版本）、Flock（早期版本）、K-Meleon使用的内核。

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

Webkit：Safari内核，Chrome内核原型，开源，它是苹果公司自己的内核，也是苹果的Safari浏览器、傲游浏览器3、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/

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

1.5、CSS Reset

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

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

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浏览器认识条件注释、其他浏览器会跳过

示例：

效果：

1.6.2、样式内属性标记法

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

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

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

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

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

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

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

代码：

效果：

1.6.3、选择器前缀法

*html *前缀只对IE6生效

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

@media screen9 {…}只对IE6/7生效

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

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

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

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

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

关于《CSS3浏览器兼容搜狗浏览器相关问题探讨》这篇文章的具体内容就介绍到这里，希望能对大家有所帮助。更多相关资讯和教程请关注 搜狗输入法!