瀏覽器兼容

1.什么是 CSS hack箩做?

css hack指各版本及各品牌瀏覽器之間對(duì)CSS解釋后出現(xiàn)網(wǎng)頁(yè)內(nèi)容的誤差(比如我們常說(shuō)錯(cuò)位)的處理。由于各瀏覽器的內(nèi)核不同妥畏,所以會(huì)造成一些誤差就像JS一樣邦邦,一個(gè)JS網(wǎng)頁(yè)特效,在微軟IE6醉蚁、IE7燃辖、IE8瀏覽器有效果,但可能在火狐(Mozilla Firefox)谷歌瀏覽器無(wú)效网棍,這樣就叫做JS hack 郭赐,所以我們對(duì)于CSS來(lái)說(shuō)他們來(lái)解決各瀏覽器對(duì)CSS解釋不同所采取的區(qū)別不同瀏覽器制作不同的CSS樣式的設(shè)置來(lái)解決這些問題就叫作CSS Hack。

2.談一談瀏覽器兼容的思路确沸?

要不要做
產(chǎn)品的角度(產(chǎn)品的受眾捌锭、受眾的瀏覽器比例、效果優(yōu)先還是基本功能優(yōu)先)
成本的角度 (有無(wú)必要做某件事)

做到什么程度
讓哪些瀏覽器支持哪些效果

如何做
根據(jù)兼容需求選擇技術(shù)框架/庫(kù)(jquery)
根據(jù)兼容需求選擇兼容工具(html5shiv.js罗捎、respond.js观谦、css resetnormalize.css桨菜、Modernizr)postCSS
條件注釋豁状、CSS Hack、js 能力檢測(cè)做一些修補(bǔ)倒得。

3.列舉5種以上瀏覽器兼容的寫法

1.條件注釋

    <p>You are using Internet Explorer 6.</p>
 <![endif]-->
<!--[if !IE]><!--> 
    <script>alert(1);</script> 
<!--<![endif]-->
 <!--[if IE 8]>
     <link href="ie8only.css" rel="stylesheet"> 
<![endif]-->```

下面是一些符號(hào)范例:
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/4769817-59b032b8136ca4b8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

2.屬性選擇器

在屬性上保持兼容的寫法

原理:在不同的版本上泻红,瀏覽器認(rèn)識(shí)不同的符號(hào),比如說(shuō)例如 IE6能識(shí)別下劃線""和星號(hào)" * "霞掺,IE7能識(shí)別星號(hào)谊路,但不能識(shí)別下劃線,IE6~IE10都認(rèn)識(shí)"\9"菩彬,但firefox前述三個(gè)都不能認(rèn)識(shí)缠劝。
其實(shí)可以理解為,ie6屬性前面加下劃線是可以實(shí)現(xiàn)的骗灶,但在ie7修復(fù)了這個(gè)bug,所以反過(guò)來(lái)可以利用這個(gè)bug,來(lái)識(shí)別并兼容ie6惨恭。
box{
color: red;
_color: blue; /ie6/-------------------------在ie6情況下color:blue
color: pink; /ie67/ ---------------------------在ie67情況下,color:pink
color: yellow\9; /
ie/edge 6-8*/--------------------------ie或者edge 6-8情況下耙旦,color:yellow;
}


3.選擇器前綴法
選擇器前綴法是針對(duì)一些頁(yè)面表現(xiàn)不一致或者需要特殊對(duì)待的瀏覽器脱羡,在CSS選擇器前加上一些只有某些特定瀏覽器才能識(shí)別的前綴進(jìn)行hack。

目前最常見的是

*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有效
等等


4.條件注釋結(jié)合類選擇器整體優(yōu)化

<!DOCTYPE html>




<html dir="ltr" lang="en-US" class="no-js">


5.利用Modernizr工具

Modernizr 是一個(gè) JavaScript 庫(kù)免都,用于檢測(cè)用戶瀏覽器的 HTML5 與 CSS3 特性锉罐。
Modernizr 使你可以方便地為各種情況編寫 JavaScript 和 CSS,無(wú)論瀏覽器是否支持這些特性琴昆。這是處理漸進(jìn)增強(qiáng)的完美方案氓鄙。
工作原理:
Modernizr 會(huì)在頁(yè)面加載后立即檢測(cè)特性;然后創(chuàng)建一個(gè)包含檢測(cè)結(jié)果的 JavaScript 對(duì)象业舍,同時(shí)在 html 元素加入方便你調(diào)整 CSS 的 class 名抖拦。

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

條件注釋:條件注釋 是于HTML源碼中被 IE 有條件解釋的語(yǔ)句舷暮。條件注釋可被用來(lái)向 IE提供及隱藏代碼态罪。 條件注釋最初于微軟的 Internet Explorer 5瀏覽器中出現(xiàn),并且直至 Internet Explorer 9 均支持下面。微軟已宣布于IE10停止支持复颈。

IE Hack:針對(duì)IE瀏覽器編寫不同的CSS的讓IE能夠正常渲染的過(guò)程


js 能力檢測(cè):瀏覽器的能力檢測(cè)目標(biāo)不是檢測(cè)特定的瀏覽器,而是檢測(cè)瀏覽器的能力沥割。這樣耗啦,只需要檢測(cè)瀏覽器是否支持特定的能力凿菩,就可以給出特定的解決方案。這一部分檢測(cè)是解決瀏覽器兼容問題的主要檢測(cè)帜讲。


html5shiv.js:用于解決IE9以下版本瀏覽器對(duì)HTML5新增標(biāo)簽不識(shí)別衅谷,并導(dǎo)致CSS不起作用的問題。所以我們?cè)谑褂眠^(guò)程中似将,想要讓低版本的瀏覽器获黔,即IE9以下的瀏覽器支持,那么這款html5shiv.js是一個(gè)非常好的選擇在验!

respond.js:Respond.js 玷氏,用于為 IE6-8 以及其它不支持 CSS3 媒體查詢功能的瀏覽器提供媒體查詢的 min-width 和 max-width 特性,實(shí)現(xiàn)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)。

css reset:將瀏覽器的默認(rèn)樣式全部去掉,更準(zhǔn)確說(shuō)就是通過(guò)重新定義標(biāo)簽樣式崎溃。“覆蓋”瀏覽器的CSS默認(rèn)屬性耻陕。最最簡(jiǎn)單的說(shuō)法就是把瀏覽器提供的默認(rèn)樣式覆蓋掉!這就是CSS reset刨沦。

Normalize.css :是一個(gè)可以定制的CSS文件诗宣,它讓不同的瀏覽器在渲染網(wǎng)頁(yè)元素的時(shí)候形式更統(tǒng)一。
它可以:
保留有用的默認(rèn)值想诅,不同于許多 CSS reset 的簡(jiǎn)單粗暴召庞。
標(biāo)準(zhǔn)化的樣式,適用范圍廣的元素来破。
糾正錯(cuò)誤和常見的瀏覽器的不一致性篮灼。
一些細(xì)微的改進(jìn),提高了易用性徘禁。
使用詳細(xì)的注釋來(lái)解釋代碼诅诱。

Modernizr:Modernizr 使你可以方便地為各種情況編寫 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ǔ)法樹,通過(guò)PostCSS這個(gè)平臺(tái),我們能夠開發(fā)一些插件翔试,來(lái)處理CSS轻要。熱門插件如autoprefixer,它可以幫我們處理兼容問題遏餐,只需正常寫CSS伦腐,autoprefixer可以幫我的自動(dòng)生成兼容性代碼


#5、一般在哪個(gè)網(wǎng)站查詢屬性兼容性失都?

http://caniuse.com/#










最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市幸冻,隨后出現(xiàn)的幾起案子粹庞,更是在濱河造成了極大的恐慌,老刑警劉巖洽损,帶你破解...
    沈念sama閱讀 218,941評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件庞溜,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡碑定,警方通過(guò)查閱死者的電腦和手機(jī)流码,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,397評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)延刘,“玉大人漫试,你說(shuō)我怎么就攤上這事〉饫担” “怎么了驾荣?”我有些...
    開封第一講書人閱讀 165,345評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)普泡。 經(jīng)常有香客問我播掷,道長(zhǎng),這世上最難降的妖魔是什么撼班? 我笑而不...
    開封第一講書人閱讀 58,851評(píng)論 1 295
  • 正文 為了忘掉前任歧匈,我火速辦了婚禮,結(jié)果婚禮上砰嘁,老公的妹妹穿的比我還像新娘件炉。我一直安慰自己,他們只是感情好般码,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,868評(píng)論 6 392
  • 文/花漫 我一把揭開白布妻率。 她就那樣靜靜地躺著,像睡著了一般板祝。 火紅的嫁衣襯著肌膚如雪宫静。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,688評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音孤里,去河邊找鬼伏伯。 笑死,一個(gè)胖子當(dāng)著我的面吹牛捌袜,可吹牛的內(nèi)容都是我干的说搅。 我是一名探鬼主播,決...
    沈念sama閱讀 40,414評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼虏等,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼弄唧!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起霍衫,我...
    開封第一講書人閱讀 39,319評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤候引,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后敦跌,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體澄干,經(jīng)...
    沈念sama閱讀 45,775評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,945評(píng)論 3 336
  • 正文 我和宋清朗相戀三年柠傍,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了麸俘。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,096評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡惧笛,死狀恐怖从媚,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情徐紧,我是刑警寧澤静檬,帶...
    沈念sama閱讀 35,789評(píng)論 5 346
  • 正文 年R本政府宣布,位于F島的核電站并级,受9級(jí)特大地震影響拂檩,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜嘲碧,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,437評(píng)論 3 331
  • 文/蒙蒙 一稻励、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧愈涩,春花似錦望抽、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,993評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至毁腿,卻和暖如春辑奈,著一層夾襖步出監(jiān)牢的瞬間苛茂,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,107評(píng)論 1 271
  • 我被黑心中介騙來(lái)泰國(guó)打工鸠窗, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留妓羊,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,308評(píng)論 3 372
  • 正文 我出身青樓稍计,卻偏偏與公主長(zhǎng)得像躁绸,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子臣嚣,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,037評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • 什么是 CSS hack CSS hack是通過(guò)在CSS樣式中加入一些特殊的符號(hào)净刮,讓不同的瀏覽器識(shí)別不同的符號(hào)(什...
    怎么昵稱閱讀 387評(píng)論 0 1
  • 1.什么是 CSS hack? 以下是引自百度文庫(kù)的定義: 簡(jiǎn)單地講茧球,css hack指各版本及各品牌瀏覽器之間對(duì)...
    饑人谷_Young丶K閱讀 387評(píng)論 0 6
  • 1.什么是 CSS hack 由于不同廠商的瀏覽器庭瑰,比如Internet Explorer,Safari,Mozi...
    zhaonu閱讀 391評(píng)論 0 0
  • 1. 什么是 CSS hack 由于不同廠商的瀏覽器,比如Internet Explorer,Safari,Moz...
    andreaxiang閱讀 609評(píng)論 0 5
  • 1. 什么是 CSS hack 由于不同廠商的瀏覽器抢埋,比如Internet Explorer,Safari,Moz...
    QQQQQCY閱讀 236評(píng)論 0 0