IE瀏覽器樣式兼容解決辦法

有些情況下需要對IE各版本的瀏覽器應(yīng)用特殊的樣式问词,這里介紹三種方式來實(shí)現(xiàn)這種目的号胚。
條件樣式表
通過條件注釋為不同版本的IE瀏覽器引入不同的樣式,例如:

<!--[if lte IE 8]><link rel="stylesheet" href="lte-ie-8.css"><![endif]-->
<!--[if lte IE 7]><link rel="stylesheet" href="lte-ie-7.css"><![endif]-->
<!--[if lte IE 6]><link rel="stylesheet" href="lte-ie-6.css"><![endif]-->

也可以在CSS文件里面應(yīng)用條件注釋,為同一元素指定不同IE瀏覽器效果级乍,例如:

/* Main stylesheet */
.foo { color: black; }

/* lte-ie-8.css, for IE8 and older */
.foo { color: green; }

/* lte-ie-7.css, for IE7 and older */
.foo { color: blue; }

/* lte-ie-6.css, for IE6 and older */
.foo { color: red; }
```````````````````
想要了解其他條件注釋优质,參見[這里](https://css-tricks.com/how-to-create-an-ie-only-stylesheet/)竣贪。

**條件類名**
在`<html>`或者`<body>`上,通過條件注釋,為不同版本的瀏覽器添加不同的類名巩螃,然后在同一個樣式文件里面演怎,對不同的類寫不同的樣式。例如:
``````````````````
<!--[if lt IE 7]><html class="ie6"><![endif]-->
<!--[if IE 7]>   <html class="ie7"><![endif]-->
<!--[if IE 8]>   <html class="ie8"><![endif]-->
<!--[if gt IE 8]><!--><html><!--<![endif]-->
``````````````````
``````````````````
.foo { color: black; }
.ie8 .foo { color: green; } /* IE8 */
.ie7 .foo { color: blue; } /* IE7 */
.ie6 .foo { color: red; } /* IE6 and older */
``````````````````

**css hack**
何為css hack呢避乏?我的理解就是不同的瀏覽器對有些css屬性解析不一樣爷耀,我們可以利用這種特性或者說瀏覽器漏洞,來為不同的瀏覽器指定不同的樣式拍皮。例如:
```````````````
.foo {
    color: black;
    color: green\9; /* IE8 and older */
    *color: blue; /* IE7 and older */
    _color: red; /* IE6 and older */
}
```````````````
css hack有多種類型歹叮,常見的有* hack,_ hack,*html hack,*+ hack,以及!important hack跑杭。詳細(xì)了解可以參看[這里](https://en.wikipedia.org/wiki/CSS_filter)。其它例子咆耿,可以參看[這里](http://www.paulirish.com/2009/browser-specific-css-hacks/)德谅。

前兩種方式都是根據(jù)條件來寫不同的樣式。第一種方式為不同版本的瀏覽器指定不同的樣式文件萨螺,這樣會導(dǎo)致樣式文件的可維護(hù)性降低窄做,因為一個頁面有多個樣式文件需要維護(hù)。第二種方式雖然可以把樣式文件合并到一個樣式文件里面慰技,但是頁面里面的條件注釋也是必不可少的椭盏,因為每個頁面html里面都要有這種條件注釋。最后一種方式可以避免這兩種問題吻商,但是寫法上面比較復(fù)雜庸汗。

資料來源:
[https://mathiasbynens.be/notes/safe-css-hacks](https://mathiasbynens.be/notes/safe-css-hacks)
[http://www.webdevout.net/css-hacks](http://www.webdevout.net/css-hacks)
[https://css-tricks.com/how-to-create-an-ie-only-stylesheet/](https://css-tricks.com/how-to-create-an-ie-only-stylesheet/)
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市手报,隨后出現(xiàn)的幾起案子蚯舱,更是在濱河造成了極大的恐慌,老刑警劉巖掩蛤,帶你破解...
    沈念sama閱讀 211,743評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件枉昏,死亡現(xiàn)場離奇詭異,居然都是意外死亡揍鸟,警方通過查閱死者的電腦和手機(jī)兄裂,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,296評論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來阳藻,“玉大人晰奖,你說我怎么就攤上這事⌒饶啵” “怎么了匾南?”我有些...
    開封第一講書人閱讀 157,285評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長蛔外。 經(jīng)常有香客問我蛆楞,道長,這世上最難降的妖魔是什么夹厌? 我笑而不...
    開封第一講書人閱讀 56,485評論 1 283
  • 正文 為了忘掉前任豹爹,我火速辦了婚禮,結(jié)果婚禮上矛纹,老公的妹妹穿的比我還像新娘臂聋。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,581評論 6 386
  • 文/花漫 我一把揭開白布孩等。 她就那樣靜靜地躺著艾君,像睡著了一般。 火紅的嫁衣襯著肌膚如雪瞎访。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,821評論 1 290
  • 那天吁恍,我揣著相機(jī)與錄音扒秸,去河邊找鬼。 笑死冀瓦,一個胖子當(dāng)著我的面吹牛伴奥,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播翼闽,決...
    沈念sama閱讀 38,960評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼拾徙,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了感局?” 一聲冷哼從身側(cè)響起尼啡,我...
    開封第一講書人閱讀 37,719評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎询微,沒想到半個月后崖瞭,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,186評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡撑毛,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,516評論 2 327
  • 正文 我和宋清朗相戀三年书聚,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片藻雌。...
    茶點(diǎn)故事閱讀 38,650評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡雌续,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出胯杭,到底是詐尸還是另有隱情驯杜,我是刑警寧澤,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布做个,位于F島的核電站艇肴,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏叁温。R本人自食惡果不足惜再悼,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,936評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望膝但。 院中可真熱鬧冲九,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,757評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至灭贷,卻和暖如春温学,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背甚疟。 一陣腳步聲響...
    開封第一講書人閱讀 31,991評論 1 266
  • 我被黑心中介騙來泰國打工仗岖, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人览妖。 一個月前我還...
    沈念sama閱讀 46,370評論 2 360
  • 正文 我出身青樓轧拄,卻偏偏與公主長得像,于是被迫代替她去往敵國和親讽膏。 傳聞我的和親對象是個殘疾皇子檩电,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,527評論 2 349

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,737評論 1 92
  • 一府树、問答部分 1. 如何調(diào)試 IE 瀏覽器 IE7及以上版本有調(diào)試臺俐末,可以按F12啟動。Paste_Image.p...
    _hello__world_閱讀 459評論 0 1
  • 1.什么是 CSS hack? 由于不同廠商的瀏覽器奄侠,比如Internet Explorer,Safari,Moz...
    FLYSASA閱讀 315評論 0 0
  • 請問鹅搪,你們覺得在街上看到那些辣得讓人走不動路的女孩子每天會在“漂亮”這件事上投資多少時間?她們除了基礎(chǔ)的護(hù)膚化妝挑...
    聯(lián)動書匠閱讀 917評論 0 0
  • 一個關(guān)于魚罐頭的無聊故事 一 每天從公交車下來遭铺,像條魚一樣從魚罐頭般塞滿其他許多魚的車廂里滑出去丽柿,順利降落到站臺,...
    微物敢齊肩閱讀 1,451評論 2 0