瀏覽器的兼容

什么是 CSS hack？

CSS hank由于不同廠商的瀏覽器，比如IE,Safari，Chrome等，或者同一廠商的瀏覽器的不同版本，如IE6和IE7，對(duì)CSS的解析不完全一樣，因此就會(huì)使得生成的頁(yè)面效果不一樣。這個(gè)時(shí)候就需要針對(duì)不同的瀏覽器去寫(xiě)不同的CSS，讓他能夠同時(shí)兼容不同的瀏覽器，在瀏覽器中的效果一致；簡(jiǎn)單的說(shuō)，

CSS hank的母的就是使你的CSS代碼兼容不同的瀏覽器。也可以反過(guò)來(lái)利用CSS hack為不同版本的瀏覽器定制編寫(xiě)不同的CSS效果。

CSS hank大致有3種表現(xiàn)形式

  • CSS類(lèi)內(nèi)部hank 比如 IE6能識(shí)別下劃線""和星號(hào)""，IE7能識(shí)別星號(hào)""，但不能識(shí)別下劃線""，而firefox兩個(gè)都不能認(rèn)識(shí)。等等
  • 選擇器hank 比如 IE6能識(shí)別html .class{}，IE7能識(shí)別+html .class{}或者*:first-child+html .class{}。等等
  • HTML頭部引用（if IE）hank 針對(duì)所有IE：<![endif]-->，針對(duì)IE6及以下版本：<![endif]-->，這類(lèi)Hack不僅對(duì)CSS生效，對(duì)寫(xiě)在判斷語(yǔ)句里面的所有代碼都會(huì)生效。

常用的CSS hack方式

（1）方式一 條件注釋法
只在IE下生效

只在IE6下生效

只在IE6以上版本生效

只在IE8上不生效

非IE瀏覽器生效

（2）方式二 類(lèi)內(nèi)屬性前綴法
屬性前綴法是在CSS樣式屬性名前加上一些只有特定瀏覽器才能識(shí)別的hack前綴，以達(dá)到預(yù)期的頁(yè)面展現(xiàn)效果。
IE瀏覽器各版本 CSS hack 對(duì)照表

hack 寫(xiě)法 實(shí)例 IE6(S) IE6(Q) IE7(S) IE7(Q) IE8(S) IE8(Q) IE9(S) IE9(Q) IE10(S) IE10(Q)
* *color 青色 Y Y Y Y N Y N Y N Y
+ +color 綠色 Y Y Y Y N Y N Y N Y
- -color 黃色 Y Y N N N N N N N N
_ _color 藍(lán)色 Y Y N Y N Y N Y N N
# #color 紫色 Y Y Y Y N Y N Y N Y
\0 color:red\0 紅色 N N N N Y N Y N Y N
\9\0 color:red\9\0 粉色 N N N N N N Y N Y N
!important color:blue !important;color:green; 棕色 N N Y N Y N Y N Y Y

說(shuō)明：在標(biāo)準(zhǔn)模式中
“-″減號(hào)是IE6專(zhuān)有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
“\9\0″ 只對(duì)IE9/IE10生效，是IE9/10的hack
（3）CSS hack方式三：選擇器前綴法
選擇器前綴法是針對(duì)一些頁(yè)面表現(xiàn)不一致或者需要特殊對(duì)待的瀏覽器，在CSS選擇器前加上一些只有某些特定瀏覽器才能識(shí)別的前綴進(jìn)行hack。
目前最常見(jiàn)的是

*html 前綴只對(duì)IE6生效+html *+前綴只對(duì)IE7生效

@media screen\9{...}只對(duì)IE6/7生效

@media \0screen {body { background: red; }}只對(duì)IE8有效

@media \0screen,screen\9{body { background: blue; }}只對(duì)IE6/7/8有效

@media screen\0 {body { background: green; }} 只對(duì)IE8/9/10有效

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

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

談一談瀏覽器兼容的思路

  • 要不要做
    • 產(chǎn)品的角度（產(chǎn)品的受眾、受眾的瀏覽器比例、效果優(yōu)先還是基本功能優(yōu)先）
    • 成本的角度 (有無(wú)必要做某件事)
  • 做到什么程度
    • 讓哪些瀏覽器支持哪些效果
  • 如何做
    • 根據(jù)兼容需求選擇技術(shù)框架/庫(kù)(jquery)
    • 根據(jù)兼容需求選擇兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
    • postCSS
    • 條件注釋、CSS Hack、js 能力檢測(cè)做一些修補(bǔ)

    列舉5種以上瀏覽器兼容的寫(xiě)法

  • *， ie6,ie7可以識(shí)別；
    _和- ， ie6可以識(shí)別；
  • !important ,表示高優(yōu)先級(jí)，ie7及以上，firefox都支持，ie6認(rèn)識(shí)帶!important的樣式屬性，但不認(rèn)識(shí)!important的優(yōu)先級(jí)；
  • -webkit- ，針對(duì)safari，chrome瀏覽器的內(nèi)核CSS寫(xiě)法
  • -moz-，針對(duì)firefox瀏覽器的內(nèi)核CSS寫(xiě)法
  • -ms-，針對(duì)ie內(nèi)核的CSS寫(xiě)法
  • -o-，針對(duì)Opera內(nèi)核的CSS寫(xiě)法
  • CSS里可以給屬性或者選擇器寫(xiě)hack。屬性例如：background:blue;_background:red;選擇器例如： html #demo {width:120px;} *+html #demo {width:130px;}
  • HTML 針對(duì)所有IE
<!–-[if IE 7]><link rel="stylesheet" href="ie7.css" type="text/css" /><![endif]–->


項(xiàng)目      范例               說(shuō)明
！     [if !IE]           非IE
lt    [if lt IE 5.5]     小于IE 5.5
lte   [if lte IE 6]      小于等于IE6
gt    [if gt IE 5]       大于 IE5
gte   [if gte IE 7]      大于等于IE7
|     [if (IE 6)|(IE 7)] IE6或者IE7

屬性選擇器

box{
 color: red; 
_color: blue; /*ie6*/
 *color: pink; /*ie67*/ 
color: yellow\9; /*ie/edge 6-8*/
}

選擇器前綴法

*html *前綴只對(duì)IE6生效
*+html *+前綴只對(duì)IE7生效
@media screen\9{...}只對(duì)IE6/7生效
@media \0screen {body { background: red; }}只對(duì)IE8有效
@media \0screen\,screen\9{body { background: blue; }}只對(duì)IE6/7/8有效
@media screen\0 {body { background: green; }} 只對(duì)IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只對(duì)IE9/10有效
@media screen and (-ms-high-contrast: active), 
  (-ms-high-contrast: none) {body { background: orange; }} 只對(duì)IE10有效等等

條件注釋結(jié)合類(lèi)選擇器整體優(yōu)化。

<!DOCTYPE html>
<!--[if IEMobile 7 ]> <html dir="ltr" lang="en-US"class="no-js iem7"> <![endif]-->
<!--[if lt IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie6 oldie"> <![endif]-->
<!--[if IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie7 oldie"> <![endif]-->
<!--[if IE 8 ]> <html dir="ltr" lang="en-US" class="no-js ie8 oldie"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html dir="ltr" lang="en-US" class="no-js"><!--<![endif]-->

利用Modernizr工具

運(yùn)行的時(shí)候它會(huì)在html元素上添加一批CSS的class名稱(chēng)，這些class名稱(chēng)標(biāo)記當(dāng)前瀏覽器支持哪些特性和不支持哪些特性，支持的特性就直接顯示該天特性的名稱(chēng)作為一個(gè)class（例:canvas,websockets），不支持的特性顯示的class是“no-特性名稱(chēng)”。以下是IE9下生成的特征類(lèi)型。

<html class=" js no-flexbox canvas canvastext no-webgl no-touch geolocation 
              postmessage no-websqldatabase no-indexeddb hashchange no-history 
        draganddrop no-websockets rgba hsla multiplebgs backgroundsize 
        no-borderimage borderradius boxshadow no-textshadow opacity 
        no-cssanimations no-csscolumns no-cssgradients no-cssreflections
        csstransforms no-csstransforms3d no-csstransitions fontface 
        generatedcontent video audio localstorage sessionstorage 
        no-webworkers no-applicationcache svg inlinesvg smil svgclippaths">
        ```
可以直接使用Modernizr在元素里生成的class名稱(chēng)，在你的css文件里定義相應(yīng)的屬性以便支持當(dāng)前瀏覽器。例如，下面的代碼可以屬性，在支持shadow陰影的瀏覽器顯示shadow，不支持的瀏覽器顯示標(biāo)準(zhǔn)的邊框：
```sh
.boxshadow #MyContainer { 
border: none;
 -webkit-box-shadow: #666 1px 1px 1px;
 -moz-box-shadow: #666 1px 1px 1px;
} 
.no-boxshadow #MyContainer {
 border: 2px solid black;
}

以下工具/名詞是做什么的

  • 條件注釋?zhuān)簵l件注釋 是于HTML源碼中被 IE 有條件解釋的語(yǔ)句。條件注釋可被用來(lái)向 IE提供及隱藏代碼。 條件注釋最初于微軟的 Internet Explorer 5瀏覽器中出現(xiàn)，并且直至 Internet Explorer 9 均支持。微軟已宣布于IE10停止支持。
  • IE Hack：針對(duì)IE瀏覽器編寫(xiě)不同的CSS的讓IE能夠正常渲染的過(guò)程
  • js 能力檢測(cè)：瀏覽器的能力檢測(cè)目標(biāo)不是檢測(cè)特定的瀏覽器，而是檢測(cè)瀏覽器的能力。這樣，只需要檢測(cè)瀏覽器是否支持特定的能力，就可以給出特定的解決方案。這一部分檢測(cè)是解決瀏覽器兼容問(wèn)題的主要檢測(cè)。
  • html5shiv.js：用于解決IE9以下版本瀏覽器對(duì)HTML5新增標(biāo)簽不識(shí)別，并導(dǎo)致CSS不起作用的問(wèn)題。所以我們?cè)谑褂眠^(guò)程中，想要讓低版本的瀏覽器，即IE9以下的瀏覽器支持，那么這款html5shiv.js是一個(gè)非常好的選擇！
  • respond.js：Respond.js 是一個(gè)小腳本，用于為 IE6-8 以及其它不支持 CSS3 媒體查詢(xún)功能的瀏覽器提供媒體查詢(xún)的 min-width 和 max-width 特性，實(shí)現(xiàn)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)。
  • css reset：將瀏覽器的默認(rèn)樣式全部去掉，更準(zhǔn)確說(shuō)就是通過(guò)重新定義標(biāo)簽樣式?！案采w”瀏覽器的CSS默認(rèn)屬性。最最簡(jiǎn)單的說(shuō)法就是把瀏覽器提供的默認(rèn)樣式覆蓋掉！這就是CSS reset。
  • normalize.css：Normalize.css 是一個(gè)可以定制的CSS文件，它讓不同的瀏覽器在渲染網(wǎng)頁(yè)元素的時(shí)候形式更統(tǒng)一。
    它可以：保留有用的默認(rèn)值，不同于許多 CSS reset的簡(jiǎn)單粗暴。標(biāo)準(zhǔn)化的樣式，適用范圍廣的元素。
    糾正錯(cuò)誤和常見(jiàn)的瀏覽器的不一致性。
    一些細(xì)微的改進(jìn)，提高了易用性。
    使用詳細(xì)的注釋來(lái)解釋代碼。
  • Modernizr：Modernizr 使你可以方便地為各種情況編寫(xiě) JavaScript 和 CSS，無(wú)論瀏覽器是否支持這些特性。這是處理漸進(jìn)增強(qiáng)的完美方案。
    Modernizr 會(huì)在頁(yè)面加載后立即檢測(cè)特性；然后創(chuàng)建一個(gè)包含檢測(cè)結(jié)果的 JavaScript 對(duì)象，同時(shí)在 html 元素加入方便你調(diào)整 CSS 的 class 名。
  • postCSS：它可以被理解為一個(gè)平臺(tái)，可以讓一些插件在上面跑，它提供了一個(gè)解析器，可以將CSS解析成抽象語(yǔ)法樹(shù)，通過(guò)PostCSS這個(gè)平臺(tái)，我們能夠開(kāi)發(fā)一些插件，來(lái)處理CSS。熱門(mén)插件如autoprefixer，它可以幫我們處理兼容問(wèn)題，只需正常寫(xiě)CSS，autoprefixer可以幫我的自動(dòng)生成兼容性代碼

    一般在哪個(gè)網(wǎng)站查詢(xún)屬性兼容性？

caniuse.com

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1. 什么是 CSS hack 由于不同廠商的流覽器或某瀏覽器的不同版本（如IE6-IE11,Firefox/Sa...
    66dong66閱讀 426評(píng)論 0贊 0
  • 關(guān)于瀏覽器的兼容問(wèn)題 1. 什么是 CSS hack 根據(jù)百度的簡(jiǎn)述：CSS hack由于不同廠商的瀏覽器，比如I...
    熊蛋子17閱讀 769評(píng)論 0贊 2
  • 前言 瀏覽器的兼容性問(wèn)題是個(gè)很龐大復(fù)雜的問(wèn)題，很難找到四海皆準(zhǔn)的辦法，這里我們只是簡(jiǎn)單介紹下幾種經(jīng)典的處理兼容性問(wèn)...
    浪里行舟閱讀 1,454評(píng)論 1贊 14
  • 一、如何調(diào)試 IE 瀏覽器1、IE7以上版本的瀏覽器自帶開(kāi)發(fā)者工具，可以直接設(shè)置進(jìn)行調(diào)試。 五、reset.css...
    崔敏嫣閱讀 514評(píng)論 0贊 1
  • 1. 什么是 CSS hack Hack是針對(duì)不同瀏覽器去寫(xiě)不同的CSS樣式，從而讓各瀏覽器能達(dá)到一致的渲染效果，...
    Schrodinger的貓閱讀 444評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容