這次帶給大家CSS3的瀏覽器相容問題，CSS3瀏覽器相容的注意事項有哪些，以下就是實戰案例，一起來看一下。
本篇介紹了CSS3與頁面佈局學習總結－瀏覽器相容與前端效能最佳化，具體如下：
##一、瀏覽器相容
#1.1、概要世界上沒有任何一個瀏覽器是一樣的，同樣的程式碼在不一樣的瀏覽器上運作就存在相容性問題。不同瀏覽器其核心亦不盡相同，相同核心的版本不同，相同版本的核心瀏覽器品牌不一樣，各種運作平台仍有差異、螢幕解析度不一樣，大小不一樣，比例不一樣。相容性主要考慮三方面：1)、CSS相容2)、JavaScript相容3)、HTML相容這三類也是前端的主要組成部分，都存在一定的相容性問題，知己知彼，百戰百勝，我們先了解瀏覽器的引擎—核心。
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
從上圖可以看出，我們在針對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瀏覽器認識條件註解、其它瀏覽器會跳過
範例：
nbsp;html>
<meta>
<title></title>
<!--[if gt IE 6]>
<style>
body{
background:lightblue;
}
</style>
<![endif]-->
<!--[if lt IE 8]>
<script type="text/javascript">
alert("您的浏览器Out了，请下载更新。");
</script>
<![endif]-->
<!--[if gt IE 6]>
<h2 id="大于IE-版本的浏览器">大于IE6版本的浏览器</h2>
<![endif]-->
效果：
IE8
chrome
ie6
“-″下划线是IE6专有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
“\9\0″ 只对IE9/IE10生效，是IE9/10的hack
这里以IE6双边距问题为例。
代码：
nbsp;html>
<meta>
<title></title>
<style>
#p1{
width: 100px;
height: 100px;
background: lightgreen;
float: left;
margin-left: 100px;
_margin-left: 50px;
}
</style>
<p></p>
效果：
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速查表》：
nbsp;html>
<meta>
<title>hack速查表</title>
<style>
/*reset*/
* {
margin: 0;
padding: 0;
}
body {
font: normal 12px/2 Tahoma, Arial, "\5b8b\4f53", Helvetica, sans-serif;
height: 100%;
text-align: center;
background: #fff;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: normal;
}
/* Tables still need 'cellspacing="0"' in the markup. */
table {
border-collapse: collapse;
border-spacing: 0;
}
ul,
ol {
list-style: none;
}
em {
font-style: normal;
color: #f00;
}
h1 {
font-size: 2em;
font-weight: 700;
}
.hack {
width: 1000px;
margin: 0 auto;
text-align: left;
}
.hack table {
width: 100%;
margin: 10px 0;
}
.hack td,
.hack th {
height: 30px;
padding: 0 5px;
border: 1px solid #ccc;
}
.hack th {
color: #cc0bf6;
}
.hack th.eq,
.hack td.eq {
width: 350px;
color: #333;
}
.hack th.identifier,
.hack td.hack-data {
width: 350px;
color: #61602f;
}
.hack td.no {
color: #fff;
text-align: center;
background-color: red;
}
.hack td.yes {
color: #fff;
text-align: center;
background-color: green;
}
.hack p b {
color: green;
}
.hack p b.red {
color: red;
}
.hack h2 {
margin: 10px 0 0 0;
font-size: 1.5em;
font-weight: 700;
}
.hack-list {
margin: 10px 0;
}
.hack-list li {
margin-bottom: 5px;
zoom: 1;
}
.hack-list span {
float: left;
width: 15px;
font-family: "\5b8b\4f53";
}
.hack-list-inf {
padding: 0 0 0 15px;
}
.hack-list em {
display: inline-block;
margin: 0 5px;
}
</style>
<h1 id="hack速查表">hack速查表</h1>
<p>
</p><p>建议：以标准浏览器为准书写代码，如遇到兼容问题，尝试其他方法解决问题，在万不得已怕情况下，采用HACK解决。</p>
<p>以下是我总结的HACK书写方法:</p>
<p>浏览器：仅限IE6+，FF，safari,chrome,opera;(截止到2011.10.12非IE均为最新版本)。</p>
<p>测试环境：windows系统;</p>
<p>DOCTYPE:
nbsp;html>.</p>
| 标志符 | 示例 | 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; Y代表支持，N代表不支持。
注意事项：
-
·
由于各浏览器更新神速，所以有些HACK可能会有变化，所以请大家注意。
-
·
[;此种方式会影响后续样式，不可取。
-
·
\9\0并非对所有属性都能区分IE8和IE9.比如：background-color可以，但background不可以，还有border也不可以。所以在实际用时要测试下。
-
·
当同时出现\0;*;_;时，推荐将\0写在*和_前面。例如:color:red\0;*color:blue;_color:green;可行，否则IE7和IE6里的效果会失效。但border例外，放在前后都可以。保险起见，还是放在前面。
推荐写法：
demo:
.eq {
color:#f00;/*标准浏览器*/
color:#f30\0;/*IE8,IE9,opera*/
*color:#c00;/*IE7及IE6*/
_color:#600;/*IE6专属*/
}
:root .eq {color:#a00\9;}/*IE9专属*/
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){.eq {color:#450;}}/*opera专属*/
@media screen and (-webkit-min-device-pixel-ratio:0){.eq {color:#879;}}/*webkit专属*/
@-moz-document url-prefix(){ .eq {color:#4dd;}}/*firefox专属*/
示例：
nbsp;html>
<meta>
<title></title>
<style>
@media screen\0 {
body {
background: lightblue;
}
}
</style>
运行结果：
1.7、文档模式 （X-UA-Compatible）
文档模式是IE8浏览器以后的一种独有技术，他可以通过meta指定当前文档的渲染模式，如可以把IE8降级成IE6、IE7使用。文档模式的主要作用是影响浏览器显示网页HTML的方式，用于指定IE的页面排版引擎（Trident）以哪个版本的方式来解析并渲染网页代码。
<meta> <meta> <meta> <meta>//最新IE
“X-UA-Compatible”的值有两种方式：Emulate+IE版本号，单纯版本号
EmulateIE8：如果声明了文档类型，则以IE8标准模式渲染页面，否则将文档模式设置为IE5
9：强制以IE9标准模式渲染页面，忽略文档类型声明
x-ua-compatible 头标签大小写不敏感，必须用在 head 中，必须在除 title 外的其他 meta 之前使用。
<meta> <meta>
Google Chrome Frame(谷歌内嵌浏览器框架GCF)
插件可以让用户的IE浏览器外不变，但用户在浏览网页时，实际上使用的是Google Chrome浏览器内核
未指定文档模式时使用默认的文档模式示例：
nbsp;html>
<meta>
<title>X-UA-Compatible</title>
<style>
#p1 {
width: 100px;
height: 100px;
background: lightgreen;
float: left;
margin-left: 100px;
_margin-left: 50px;
}
</style>
<p></p>
运行结果：
强制指定文档模式为IE6，在IE8下会自动变成怪异模式，简单说IE8被当作IE6在用。
多数情况下我们不会这样降级使用，一般会将IE选择为最新版本的文档模式（注意不是文档类型），如果IE浏览器使用了GCF技术我们应该强制使用最新版内核，写入如下：
现在多数网站这是这种写法如baidu。
1.8、javascript兼容
这里有两层意思，第一可以使用javascript操作样式与标签，强制浏览器兼容，比如先使用javascript判断浏览器类型，再操作样式与标签。
第二指javascript存在兼容问题，如一个对象在某些浏览器下没有办法使用，要让javascript更加兼容，可以采取如下办法：
1、使用第三方提代的javascript库，如jQuery，Zepto， Prototype，dojo、YUI、ExtJS
像jQuery这种成熟的javascript库经过多次的版本迭代，已经变得非常成熟，世界上的网站到现在近60%都使用到了jQuery，他的兼容性不错。
2、浏览器检测、重新封装
使用javascript判断浏览器类型，对一些特点的方法或对象重新封装后使用屏蔽浏览的不兼容性。可以使用User-Agent、或特定对象。
示例：
nbsp;html>
<meta>
<title></title>
<h2></h2>
<script>
//用于检测浏览器是否为IE
var isIE=function(){
return !!window.ActiveXObject;
}
function show(info){
document.getElementById("msg").innerHTML+=info+"<br/>"
}
//获得用户代理对象，浏览器与操作系统信息
show(navigator.userAgent);
show(isIE()?"是IE浏览器":"不是IE浏览器");
</script>
效果：
在user-agent中包含有不少的客户端信息，可以解析出判断浏览器部分的内容。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是CSS3的瀏覽器相容問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！
光標的下一個CSS樣式Apr 23, 2025 am 11:04 AM具有CSS的自定義光標很棒，但是我們可以將JavaScript提升到一個新的水平。使用JavaScript，我們可以在光標狀態之間過渡，將動態文本放置在光標中，應用複雜的動畫並應用過濾器。
世界碰撞：使用樣式查詢的鑰匙幀碰撞檢測Apr 23, 2025 am 10:42 AM互動CSS動畫和元素相互啟動的元素在2025年似乎更合理。雖然不需要在CSS中實施乒乓球，但CSS的靈活性和力量的增加，可以懷疑Lee＆Aver Lee有一天會成為一種
使用CSS背景過濾器進行UI效果Apr 23, 2025 am 10:20 AM有關利用CSS背景濾波器屬性來樣式用戶界面的提示和技巧。您將學習如何在多個元素之間進行背景過濾器，並將它們與其他CSS圖形效果集成在一起以創建精心設計的設計。
微笑嗎？Apr 23, 2025 am 09:57 AM好吧，事實證明，SVG的內置動畫功能從未按計劃進行棄用。當然，CSS和JavaScript具有承載負載的能力，但是很高興知道Smil並沒有像以前那樣死在水中
'漂亮”在情人眼中Apr 23, 2025 am 09:40 AM是的，讓＃039;跳上文字包裝：Safari Technology Preview In Pretty Landing！但是請注意，它與在鉻瀏覽器中的工作方式不同。
CSS-tricks編年史XLIIIApr 23, 2025 am 09:35 AM此CSS-tricks更新了，重點介紹了年鑑，最近的播客出現，新的CSS計數器指南以及增加了幾位新作者，這些新作者貢獻了有價值的內容。
tailwind的@Apply功能比聽起來更好Apr 23, 2025 am 09:23 AM在大多數情況下，人們展示了@Apply的@Apply功能，其中包括Tailwind的單個property實用程序之一（會改變單個CSS聲明）。當以這種方式展示時，@Apply聽起來似乎很有希望。如此明顯
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
MantisBT
Mantis是一個易於部署的基於Web的缺陷追蹤工具，用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。
SecLists
SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合，這些清單在安全評估過程中經常使用，而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表，幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上，他就可以存取所需的每種類型的清單。
Atom編輯器mac版下載
最受歡迎的的開源編輯器
EditPlus 中文破解版
體積小，語法高亮，不支援程式碼提示功能
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
