瀏覽器兼容寫法

  • IE條件注釋
  • 屬性選擇器
  • 選擇器前綴法
  • 使用兼容工具
  • js 修補

兼容問題查詢網(wǎng)站http://www.caniuse.com

IE條件注釋

是于HTML源碼中被IE有條件解釋的語句。條件注釋可被用來向IE提供及隱藏代碼。
(注:IE10不再支持條件注釋)

Paste_Image.png
    <!--[if IE 6]>
    <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]-->

瀏覽器符合哪一條噪径,那條就生效京郑。

屬性選擇器

例如 IE6能識別下劃線和星號也搓,IE7能識別星號敢茁,但不能識別下劃線漠其,IE6~IE10都認識"\9"屑迂,但firefox前述三個都不能認識诡渴。

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

選擇器前綴法

原理與屬性選擇器類似捐晶,在選擇器前加前綴,只有某些瀏覽器能識別妄辩,以此來針對性的生效惑灵。

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

使用兼容工具

  • html5shiv.js
    IE9以下版本瀏覽器對HTML5新增標簽不識別,并導(dǎo)致CSS不起作用的問題眼耀。所以我們在使用過程中英支,想要讓低版本的瀏覽器,即IE9以下的瀏覽器支持哮伟,可以使用該工具干花!
  • respond.js
    IE6-8等老版本的瀏覽器不支持CSS3的媒體查詢功能,那么就可以用這個工具楞黄,用 js 去實現(xiàn)響應(yīng)式池凄。
  • css reset
    對瀏覽器的默認樣式全部重置,全部推倒重來鬼廓。
  • normalize.css
    標準化CSS肿仑,讓不同瀏覽器的CSS樣式統(tǒng)一。
  • Modernizr
    Modernizr 使你可以方便地為各種情況編寫 JavaScript 和 CSS桑阶,無論瀏覽器是否支持這些特性柏副。這是處理漸進增強的完美方案。
    Modernizr 會在頁面加載后立即檢測特性蚣录;然后創(chuàng)建一個包含檢測結(jié)果的 JavaScript 對象割择,同時在 html 元素加入方便你調(diào)整 CSS 的 class 名。

js 修補

一些簡單的兼容問題萎河,可以自己寫一段 js 代碼去實現(xiàn)該功能

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末荔泳,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子虐杯,更是在濱河造成了極大的恐慌玛歌,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,084評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件擎椰,死亡現(xiàn)場離奇詭異支子,居然都是意外死亡,警方通過查閱死者的電腦和手機达舒,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,623評論 3 392
  • 文/潘曉璐 我一進店門值朋,熙熙樓的掌柜王于貴愁眉苦臉地迎上來叹侄,“玉大人,你說我怎么就攤上這事昨登≈捍” “怎么了?”我有些...
    開封第一講書人閱讀 163,450評論 0 353
  • 文/不壞的土叔 我叫張陵丰辣,是天一觀的道長撒强。 經(jīng)常有香客問我,道長笙什,這世上最難降的妖魔是什么飘哨? 我笑而不...
    開封第一講書人閱讀 58,322評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮琐凭,結(jié)果婚禮上杖玲,老公的妹妹穿的比我還像新娘。我一直安慰自己淘正,他們只是感情好摆马,可當(dāng)我...
    茶點故事閱讀 67,370評論 6 390
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著鸿吆,像睡著了一般囤采。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上惩淳,一...
    開封第一講書人閱讀 51,274評論 1 300
  • 那天蕉毯,我揣著相機與錄音,去河邊找鬼思犁。 笑死代虾,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的激蹲。 我是一名探鬼主播棉磨,決...
    沈念sama閱讀 40,126評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼学辱!你這毒婦竟也來了乘瓤?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,980評論 0 275
  • 序言:老撾萬榮一對情侶失蹤策泣,失蹤者是張志新(化名)和其女友劉穎衙傀,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體萨咕,經(jīng)...
    沈念sama閱讀 45,414評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡统抬,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,599評論 3 334
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片聪建。...
    茶點故事閱讀 39,773評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡发侵,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出妆偏,到底是詐尸還是另有隱情,我是刑警寧澤盅弛,帶...
    沈念sama閱讀 35,470評論 5 344
  • 正文 年R本政府宣布钱骂,位于F島的核電站,受9級特大地震影響挪鹏,放射性物質(zhì)發(fā)生泄漏见秽。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,080評論 3 327
  • 文/蒙蒙 一讨盒、第九天 我趴在偏房一處隱蔽的房頂上張望解取。 院中可真熱鬧,春花似錦返顺、人聲如沸禀苦。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,713評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽振乏。三九已至,卻和暖如春秉扑,著一層夾襖步出監(jiān)牢的瞬間慧邮,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,852評論 1 269
  • 我被黑心中介騙來泰國打工舟陆, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留误澳,地道東北人。 一個月前我還...
    沈念sama閱讀 47,865評論 2 370
  • 正文 我出身青樓秦躯,卻偏偏與公主長得像忆谓,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子踱承,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,689評論 2 354

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

  • 1陪毡、什么是 CSS hack 不同廠商的瀏覽器(比如Internet Explorer,Safari,Mozill...
    zh_yang閱讀 363評論 0 0
  • 什么是 CSS hack CSS hack是通過在CSS樣式中加入一些特殊的符號,讓不同的瀏覽器識別不同的符號(什...
    怎么昵稱閱讀 387評論 0 1
  • 什么是 CSS hack勾扭? CSS hank由于不同廠商的瀏覽器毡琉,比如IE,Safari,Chrome等妙色,或者同一...
    饑人谷_tonya閱讀 646評論 0 0
  • 什么是 CSS hack 由于不同廠商的瀏覽器桅滋,比如Internet Explorer,Safari,Mozill...
    阿魯提爾閱讀 264評論 0 2
  • 1.什么是 CSS hack 由于不同廠商的瀏覽器,比如Internet Explorer,Safari,Mozi...
    zhaonu閱讀 391評論 0 0