瀏覽器兼容

什么是 CSS hack

由于不同的瀏覽器,甚至同一瀏覽器的不同版本對CSS的解析認識不一樣,導致生成的頁面效果不一致礼饱,寫出針對不同瀏覽器CSS 作郭。

談一談瀏覽器兼容的思路

  1. 要不要做兼容。從產品的角度和成本的角度去考慮逗抑,從產品的角度考慮:產品的受眾剧辐、受眾的瀏覽器比例寒亥、效果優(yōu)先還是基本功能優(yōu)先;從成本的角度考慮:有無必要做某件事荧关、值不值得做溉奕。
  2. 做到什么程度。讓哪些瀏覽器支持忍啤,又支持哪些效果加勤。
  3. 如何做。根據兼容需求選擇技術框架/庫(如jquery)同波、根據兼容需求選擇兼容工具(如html5shiv.js胸竞、respond.js、css reset参萄、normalize.css卫枝、Modernizr)、postCSS讹挎、條件注釋校赤、CSS Hack、js 能力檢測做一些修補筒溃。

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

IE條件注釋:
<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->

IE屬性前綴:
.selector{
color: red;
_color: blue; /ie6/
color: pink; /ie6-7/
color: yellow\9; /
ie/edge 6-8*/
}

IE選擇器前綴:
html{}/ie6/
+html{}/ie7
/

不同瀏覽器添加相應的屬性前綴:
div{
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

屬性兼容的方式:
inline-block: >=ie8
min-width/min-height: >=ie8
:before,:after: >=ie8
div:hover: >=ie7
inline-block: >=ie8
background-size: >=ie9

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

  • 條件注釋
  • IE Hack
  • js 能力檢測
  • html5shiv.js
  • respond.js
  • css reset
  • normalize.css
  • Modernizr
  • postCSS

條件注釋:
條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語句马篮。條件注釋可被用來向IE提供及隱藏代碼。IE中的條件注釋(Conditional comments)對IE的版本和IE非IE有優(yōu)秀的區(qū)分能力怜奖,是WEB設計中常用的hack方法浑测。條件注釋只能用于IE5以上。

IE Hack:
針對不同的IE瀏覽器編寫不同的CSS讓IE能夠正常渲染的過程歪玲。

js 能力檢測:
js能力檢測的目標不是識別特定的瀏覽器迁央,而是識別瀏覽器的能力。使用這種方式無需顧及瀏覽器如何如何滥崩,只需確定瀏覽器是否支持特定的能力岖圈,就可以給出相關的方案。

html5shiv.js:
解決ie9以下瀏覽器對html5新增標簽的不識別钙皮,并導致CSS不起作用的問題蜂科。

respond.js:
讓不支持css3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支持查詢。

css reset:
HTML標簽在瀏覽器中都有默認的樣式短条,不同瀏覽器的默認樣式之間存在差別导匣。css reset能將瀏覽器的默認樣式全部覆蓋掉。

normalize.css:
Normalize.css 只是一個很小的CSS文件茸时,但它在默認的HTML元素樣式上提供了跨瀏覽器的高度一致性贡定。相比于傳統(tǒng)的CSS reset,Normalize.css是一種現代的屹蚊、為HTML5準備的優(yōu)質替代方案厕氨。

postCSS:
PostCSS基于js插件去轉換css的一個工具进每。PostCSS的目標是通過自定義插件和工具這樣的生態(tài)系統(tǒng)來改造CSS。與Sass和Less這些預編譯器相同的原則命斧,PostCSS把擴展的語法和特性轉換成現代的瀏覽器友好的CSS田晚。

Modernizr:
Modernizr 是一個很小的用來檢測下一代 Web 技術原生實現可用性的 JavaScript 庫。HTML5 和 CSS3 都引入了各自的新特性国葬,但是同時也有很多瀏覽器不支持這些新特性贤徒。Modernizr 提供了一種簡單的方式檢測任意新特性,從而讓我們可以采取相應的操作汇四。

一般在哪個網站查詢屬性兼容性

http://caniuse.com/
http://browserhacks.com/

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末接奈,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子通孽,更是在濱河造成了極大的恐慌序宦,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,755評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件背苦,死亡現場離奇詭異互捌,居然都是意外死亡,警方通過查閱死者的電腦和手機行剂,發(fā)現死者居然都...
    沈念sama閱讀 93,305評論 3 395
  • 文/潘曉璐 我一進店門秕噪,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人厚宰,你說我怎么就攤上這事腌巾。” “怎么了铲觉?”我有些...
    開封第一講書人閱讀 165,138評論 0 355
  • 文/不壞的土叔 我叫張陵澈蝙,是天一觀的道長。 經常有香客問我备燃,道長碉克,這世上最難降的妖魔是什么凌唬? 我笑而不...
    開封第一講書人閱讀 58,791評論 1 295
  • 正文 為了忘掉前任并齐,我火速辦了婚禮,結果婚禮上客税,老公的妹妹穿的比我還像新娘况褪。我一直安慰自己,他們只是感情好更耻,可當我...
    茶點故事閱讀 67,794評論 6 392
  • 文/花漫 我一把揭開白布测垛。 她就那樣靜靜地躺著,像睡著了一般秧均。 火紅的嫁衣襯著肌膚如雪食侮。 梳的紋絲不亂的頭發(fā)上号涯,一...
    開封第一講書人閱讀 51,631評論 1 305
  • 那天,我揣著相機與錄音锯七,去河邊找鬼链快。 笑死,一個胖子當著我的面吹牛眉尸,可吹牛的內容都是我干的域蜗。 我是一名探鬼主播,決...
    沈念sama閱讀 40,362評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼噪猾,長吁一口氣:“原來是場噩夢啊……” “哼霉祸!你這毒婦竟也來了?” 一聲冷哼從身側響起袱蜡,我...
    開封第一講書人閱讀 39,264評論 0 276
  • 序言:老撾萬榮一對情侶失蹤丝蹭,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后坪蚁,有當地人在樹林里發(fā)現了一具尸體半夷,經...
    沈念sama閱讀 45,724評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,900評論 3 336
  • 正文 我和宋清朗相戀三年迅细,在試婚紗的時候發(fā)現自己被綠了巫橄。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,040評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡茵典,死狀恐怖湘换,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情统阿,我是刑警寧澤彩倚,帶...
    沈念sama閱讀 35,742評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站扶平,受9級特大地震影響帆离,放射性物質發(fā)生泄漏。R本人自食惡果不足惜结澄,卻給世界環(huán)境...
    茶點故事閱讀 41,364評論 3 330
  • 文/蒙蒙 一哥谷、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧麻献,春花似錦们妥、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,944評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春惑惶,著一層夾襖步出監(jiān)牢的瞬間煮盼,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,060評論 1 270
  • 我被黑心中介騙來泰國打工带污, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留孕似,地道東北人。 一個月前我還...
    沈念sama閱讀 48,247評論 3 371
  • 正文 我出身青樓刮刑,卻偏偏與公主長得像喉祭,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子雷绢,可洞房花燭夜當晚...
    茶點故事閱讀 44,979評論 2 355

推薦閱讀更多精彩內容

  • 什么是 CSS hack泛烙? 基礎概念 由于不同廠商的瀏覽器,比如Internet Explorer,Safari,...
    Sketch閱讀 293評論 0 0
  • 什么是 CSS hack CSS hack是通過在CSS樣式中加入一些特殊的符號翘紊,讓不同的瀏覽器識別不同的符號(什...
    怎么昵稱閱讀 387評論 0 1
  • 一蔽氨、前言 做前端開發(fā),必然少不了瀏覽器帆疟,然而不同的廠商有著各自版本的瀏覽器鹉究,不同的瀏覽器對css的理解和解析不一樣...
    青鳴閱讀 502評論 0 2
  • 瀏覽器兼容 什么是瀏覽器兼容 同一份代碼,有的瀏覽器效果正常踪宠,有的不正常不正常的原因是什么自赔?(不支持?bug柳琢?)如...
    _空空閱讀 330評論 0 4
  • 1.什么是 CSS hack绍妨? 以下是引自百度文庫的定義: 簡單地講,css hack指各版本及各品牌瀏覽器之間對...
    饑人谷_Young丶K閱讀 387評論 0 6