瀏覽器兼容

1.什么是 CSS hack盐杂?

因為不同瀏覽器或者不同版本的瀏覽器所支持的CSS是有區(qū)別的,我們利用CSS Hack來使我們的頁面更好的在瀏覽器上展示豪诲。
CSS Hack大致有3種表現(xiàn)形式霉囚,CSS屬性前綴法柄粹、選擇器前綴法以及IE條件注釋法(即HTML頭部引用if IE)Hack粥惧,實際項目中CSS Hack大部分是針對IE瀏覽器不同版本之間的表現(xiàn)差異而引入的键畴。
1.屬性前綴法(即類內(nèi)部Hack):例如 IE6能識別下劃線_和星號*,IE7能識別星號*突雪,但不能識別下劃線_起惕,IE6~IE10都認識\9,但firefox前述三個都不能認識咏删。
2.選擇器前綴法(即選擇器Hack)
3.IE條件注釋法(即HTML條件注釋Hack):針對所有IE(注:IE10+已經(jīng)不再支持條件注釋):惹想,針對IE6及以下版本:``。這類Hack不僅對CSS生效督函,對寫在判斷語句里面的所有代碼都會生效嘀粱。

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

  • 首先,要確定是否需要做瀏覽器兼容辰狡。
    產(chǎn)品的角度(產(chǎn)品的受眾锋叨、受眾的瀏覽器比例、效果優(yōu)先還是基本功能優(yōu)先)
    成本的角度 (有無必要做某件事)
  • 其次搓译,思考要做到什么程度悲柱。
    讓哪些瀏覽器支持哪些效果。
  • 最后些己,要怎么做豌鸡。
    根據(jù)兼容需求選擇技術(shù)框架/庫(jquery)
    根據(jù)兼容需求選擇兼容工具(html5shiv.js、respond.js段标、css reset涯冠、normalize.css、Modernizr)
    postCSS
    條件注釋逼庞、CSS Hack蛇更、js 能力檢測做一些修補

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

1.屬性前綴法

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

2.條件注釋法(ie10以上不再支持條件注釋)

<!--[if !IE]><!-->
<script>alert(1);</script>
<!--<![endif]-->
<!--[if IE 8]>
<link href="ie8only.css" rel="stylesheet">
<![endif]-->`

3.清除浮動

.clearfix:after{ content: ''; display: block; clear: both; } .clearfix{ *zoom: 1; /* 僅對ie67有效 */ }

4.設(shè)置元素寬高

.target{ display: inline-block; *display: inline; *zoom: 1; }

5.利用html5shiv、respond

6.利用Modernizr

<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets         rgba hsla multiplebgs backgroundsize borderimage borderradius         boxshadow textshadow opacity cssanimations csscolumns cssgradients         cssreflections csstransforms csstransforms3d csstransitions         fontface         generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">

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

  • 條件注釋
    條件注釋是于HTML源碼中被IE有條件解釋的語句赛糟。條件注釋可被用來向IE提供及隱藏代碼派任。
  • IE Hack
    針對IE瀏覽器編寫不同的CSS讓IE能夠正常渲染。
  • js 能力檢測
    瀏覽器的能力檢測目標不是檢測特定的瀏覽器璧南,而是檢測瀏覽器的能力掌逛。這樣,只需要檢測瀏覽器是否支持特定的能力司倚,就可以給出特定的解決方案。這一部分檢測是解決瀏覽器兼容問題的主要檢測动知。
  • html5shiv.js
    解決ie9以下版本的瀏覽器對html5標簽無法識別的問題皿伺。
  • respond.js
    提供一個小腳本盒粮,以便在不支持CSS3媒體查詢的瀏覽器中啟用響應(yīng)式網(wǎng)頁設(shè)計,特別是ie8及更低版本丹皱。
  • css reset
    重置瀏覽器默認樣式。
  • normalize.css
    Normalize.css 是一個可以定制的CSS文件种呐,它讓不同的瀏覽器在渲染網(wǎng)頁元素的時候形式更統(tǒng)一。
  • Modernizr
    Modernizr是一套JavaScript 庫爽室,用來偵測瀏覽器是否支持HTML5與CSS3等規(guī)格汁讼。如果瀏覽器不支持阔墩,Modernizr會使用其他的解決方法來進行模擬。
  • postCSS
    PostCSS是一個JS插件轉(zhuǎn)換樣式表的工具啸箫。這些插件能夠檢驗?zāi)愕腃SS、支持變量和混合忘苛,轉(zhuǎn)化css3的新特性語法蝉娜、行內(nèi)圖片等唱较。

5.一般在哪個網(wǎng)站查詢屬性兼容性?

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末召川,一起剝皮案震驚了整個濱河市南缓,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌荧呐,老刑警劉巖汉形,帶你破解...
    沈念sama閱讀 216,692評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異倍阐,居然都是意外死亡概疆,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,482評論 3 392
  • 文/潘曉璐 我一進店門峰搪,熙熙樓的掌柜王于貴愁眉苦臉地迎上來岔冀,“玉大人,你說我怎么就攤上這事罢艾¢沟撸” “怎么了?”我有些...
    開封第一講書人閱讀 162,995評論 0 353
  • 文/不壞的土叔 我叫張陵咐蚯,是天一觀的道長童漩。 經(jīng)常有香客問我,道長春锋,這世上最難降的妖魔是什么矫膨? 我笑而不...
    開封第一講書人閱讀 58,223評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮期奔,結(jié)果婚禮上侧馅,老公的妹妹穿的比我還像新娘。我一直安慰自己呐萌,他們只是感情好馁痴,可當我...
    茶點故事閱讀 67,245評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著肺孤,像睡著了一般罗晕。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上赠堵,一...
    開封第一講書人閱讀 51,208評論 1 299
  • 那天小渊,我揣著相機與錄音,去河邊找鬼茫叭。 笑死酬屉,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播呐萨,決...
    沈念sama閱讀 40,091評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼杀饵,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了垛吗?” 一聲冷哼從身側(cè)響起凹髓,我...
    開封第一講書人閱讀 38,929評論 0 274
  • 序言:老撾萬榮一對情侶失蹤烁登,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后饵沧,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,346評論 1 311
  • 正文 獨居荒郊野嶺守林人離奇死亡羡儿,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,570評論 2 333
  • 正文 我和宋清朗相戀三年掠归,在試婚紗的時候發(fā)現(xiàn)自己被綠了悄泥。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,739評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡厨相,死狀恐怖蛮穿,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情践磅,我是刑警寧澤灸异,帶...
    沈念sama閱讀 35,437評論 5 344
  • 正文 年R本政府宣布,位于F島的核電站细溅,受9級特大地震影響儡嘶,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜蹦狂,卻給世界環(huán)境...
    茶點故事閱讀 41,037評論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望窜骄。 院中可真熱鬧,春花似錦邻遏、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,677評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至滞项,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間夭坪,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,833評論 1 269
  • 我被黑心中介騙來泰國打工律杠, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留竞惋,地道東北人。 一個月前我還...
    沈念sama閱讀 47,760評論 2 369
  • 正文 我出身青樓嗓奢,卻偏偏與公主長得像浑厚,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子物蝙,可洞房花燭夜當晚...
    茶點故事閱讀 44,647評論 2 354

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

  • 什么是 CSS hack CSS hack是通過在CSS樣式中加入一些特殊的符號诬乞,讓不同的瀏覽器識別不同的符號(什...
    怎么昵稱閱讀 387評論 0 1
  • 什么是 CSS hack 由于不同廠商的瀏覽器,比如Internet Explorer,Safari,Mozill...
    阿魯提爾閱讀 264評論 0 2
  • CSS Hack 不同的瀏覽器對某些CSS代碼解析會存在一定的差異森瘪,因此就會導(dǎo)致不同瀏覽器下給用戶展示的頁面效果不...
    zx9426閱讀 386評論 0 0
  • 本文版權(quán)歸饑人谷和本人所有 1.什么是 CSS hackCSS hack由于不同廠商的瀏覽器扼睬,比如Internet...
    饑人谷_xxxxx閱讀 301評論 0 0
  • 一窗宇、問答部分 1. 如何調(diào)試 IE 瀏覽器 IE7及以上版本有調(diào)試臺,可以按F12啟動担映。Paste_Image.p...
    _hello__world_閱讀 464評論 0 1