什么是CSS hack名扛?在 CSS 和 HTML里如何寫 hack?在 CSS 中 IE 7茧痒、IE 8的 hack 方式肮韧?

CSS hack:
由于不同廠商的流覽器或某瀏覽器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),對CSS的支持旺订、解析不一樣弄企,導致在不同瀏覽器的環(huán)境中呈現出不一致的頁面展現效果。這時区拳,我們?yōu)榱双@得統一的頁面效果拘领,就需要針對不同的瀏覽器或不同版本寫特定的CSS樣式,我們把這個針對不同的瀏覽器/不同版本寫相應的CSS code的過程樱调,叫做CSS hack!

如何寫:

  • 屬性前綴法(即類內部Hack):例如 IE6能識別下劃線""和星號" "约素,IE7能識別星號" ",但不能識別下劃線""笆凌,IE6~IE10都認識"\9"圣猎,但firefox前述三個都不能認識
  • 選擇器前綴法(即選擇器Hack):例如 IE6能識別html .class{},IE7能識別+html .class{}或者*:first-child+html .class{}
  • IE條件注釋法(即HTML條件注釋Hack):針對所有IE(注:IE10+已經不再支持條件注釋): 乞而,針對IE6及以下版本: 送悔。這類Hack不僅對CSS生效,對寫在判斷語句里面的所有代碼都會生效

IE7&IE8 hack:

  • 條件注釋:
<!--[if IE 7]>
這段文字只在IE7瀏覽器顯示
<![endif]-->
<!--[if IE 8]>
這段文字只在IE8瀏覽器顯示
<![endif]-->
  • 類內屬性前綴法


/*類內部hack:*/
    .header {_width:100px;}            /* IE6專用*/
    .header {*+width:100px;}        /* IE7專用*/
    .header {*width:100px;}            /* IE6爪模、IE7共用*/
    .header {width:100px\0;}        /* IE8欠啤、IE9共用*/
    .header {width:100px\9;}        /* IE6、IE7屋灌、IE8洁段、IE9共用*/
    .header {width:330px\9\0;}    /* IE9專用*/

/*選擇器Hack:*/
    *html .header{}        /*IE6*/ 
    *+html .header{}    /*IE7*/ 
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市声滥,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖落塑,帶你破解...
    沈念sama閱讀 206,602評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件纽疟,死亡現場離奇詭異,居然都是意外死亡憾赁,警方通過查閱死者的電腦和手機污朽,發(fā)現死者居然都...
    沈念sama閱讀 88,442評論 2 382
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來龙考,“玉大人蟆肆,你說我怎么就攤上這事』蘅睿” “怎么了炎功?”我有些...
    開封第一講書人閱讀 152,878評論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長缓溅。 經常有香客問我蛇损,道長,這世上最難降的妖魔是什么坛怪? 我笑而不...
    開封第一講書人閱讀 55,306評論 1 279
  • 正文 為了忘掉前任淤齐,我火速辦了婚禮,結果婚禮上袜匿,老公的妹妹穿的比我還像新娘更啄。我一直安慰自己,他們只是感情好居灯,可當我...
    茶點故事閱讀 64,330評論 5 373
  • 文/花漫 我一把揭開白布祭务。 她就那樣靜靜地躺著,像睡著了一般穆壕。 火紅的嫁衣襯著肌膚如雪待牵。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,071評論 1 285
  • 那天喇勋,我揣著相機與錄音缨该,去河邊找鬼。 笑死川背,一個胖子當著我的面吹牛贰拿,可吹牛的內容都是我干的。 我是一名探鬼主播熄云,決...
    沈念sama閱讀 38,382評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼膨更,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了缴允?” 一聲冷哼從身側響起荚守,我...
    開封第一講書人閱讀 37,006評論 0 259
  • 序言:老撾萬榮一對情侶失蹤珍德,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后矗漾,有當地人在樹林里發(fā)現了一具尸體锈候,經...
    沈念sama閱讀 43,512評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 35,965評論 2 325
  • 正文 我和宋清朗相戀三年敞贡,在試婚紗的時候發(fā)現自己被綠了泵琳。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,094評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡誊役,死狀恐怖获列,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情蛔垢,我是刑警寧澤击孩,帶...
    沈念sama閱讀 33,732評論 4 323
  • 正文 年R本政府宣布,位于F島的核電站啦桌,受9級特大地震影響溯壶,放射性物質發(fā)生泄漏。R本人自食惡果不足惜甫男,卻給世界環(huán)境...
    茶點故事閱讀 39,283評論 3 307
  • 文/蒙蒙 一且改、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧板驳,春花似錦又跛、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,286評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至端幼,卻和暖如春礼烈,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背婆跑。 一陣腳步聲響...
    開封第一講書人閱讀 31,512評論 1 262
  • 我被黑心中介騙來泰國打工此熬, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人滑进。 一個月前我還...
    沈念sama閱讀 45,536評論 2 354
  • 正文 我出身青樓犀忱,卻偏偏與公主長得像,于是被迫代替她去往敵國和親扶关。 傳聞我的和親對象是個殘疾皇子阴汇,可洞房花燭夜當晚...
    茶點故事閱讀 42,828評論 2 345

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,728評論 1 92
  • 做前端多年节槐,雖然不是經常需要hack搀庶,但是我們經常會遇到各瀏覽器表現不一致的情況拐纱。基于此哥倔,某些情況我們會極不情愿的...
    大女表哥閱讀 1,088評論 0 9
  • 原文地址:常見的CSS Hack 轉載請注明出處 什么是CSS hack 由于不同廠商的流覽器或某瀏覽器的不同版本...
    xiaoxiao昱閱讀 905評論 0 9
  • 一戳玫、如何調試 IE 瀏覽器? 在IE7以上的版本中可以通過按快捷鍵F12調出開發(fā)人員調試框未斑,如下圖IE7以上調試工...
    dengpan閱讀 543評論 0 2
  • 什么是CSS hack? 由于不同廠商的流覽器或某瀏覽器的不同版本(如IE,Firefox/Safari/Oper...
    魔_術師閱讀 2,531評論 0 3