瀏覽器 css 兼容

1.什么是 CSS hack?

由于不同廠商的瀏覽器签餐,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一廠商的瀏覽器的不同版本矢炼,如IE6和IE7朱转,對CSS的解析認(rèn)識不完全一樣,因此會(huì)導(dǎo)致生成的頁面效果不一樣姑子,得不到我們所需要的頁面效果刚梭。這個(gè)時(shí)候我們就需要針對不同的瀏覽器去寫不同的CSS肠阱,讓它能在不同的瀏覽器中也能得到我們想要的頁面效果。

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

  • 首先從產(chǎn)品角度出發(fā)朴读,考慮產(chǎn)品的受眾屹徘、受眾的瀏覽器比例、效果優(yōu)先還是基本功能優(yōu)先衅金。
    (列如銀行和政府部門噪伊,需要保證其能讓絕大部分的瀏覽器都能使用,就需優(yōu)先考慮基本功能氮唯。而一些列如游戲鉴吹,動(dòng)漫網(wǎng)站的受眾較為年輕,使用瀏覽器的版本較新您觉,此時(shí)應(yīng)考慮從效果出發(fā)拙寡。)
  • 然后再考慮做這些功能的收益與成本是否成比例。
  • 考慮兼容哪些瀏覽器至哪些版本琳水,支持哪些效果。
  • 考慮漸進(jìn)增強(qiáng)和優(yōu)雅降級間的選擇(在時(shí)間較為緊迫的情況下般堆,考慮優(yōu)雅降級)
  • 根據(jù)兼容需求選擇技術(shù)框架/庫
    (Bootstrap (>=ie8)
    jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
    Vue (>= ie9)
  • 根據(jù)兼容需求選擇兼容工具(html5shiv.js在孝、respond.js、css reset淮摔、normalize.css私沮、Modernizr)
    postCSS
  • 條件注釋、CSS Hack和橙、js 能力檢測做一些修補(bǔ)

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

1.條件注釋

  <!--[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]-->

項(xiàng)目      范例               說明
仔燕!     [if !IE]           非IE
lt    [if lt IE 5.5]     小于IE 5.5
lte   [if lte IE 6]      小于等于IE6
gt    [if gt IE 5]       大于 IE5
gte   [if gte IE 7]      大于等于IE7
|     [if (IE 6)|(IE 7)] IE6或者IE7

2.屬性選擇器
常見的屬性兼容情況:inline-blcok:>=ie8,min-width:>=ie8魔招,:before:after:>=ie8 ,div:hover>=ie8, background-size: >=ie9,圓角:>=ie9晰搀,陰影:>=ie9,動(dòng)畫漸變:>=ie10

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

3.選擇器前綴法

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

4.條件注釋結(jié)合類選擇器整體優(yōu)化办斑。

<!DOCTYPE html>
<!--[if IEMobile 7 ]> <html dir="ltr" lang="en-US"class="no-js iem7"> <![endif]-->
<!--[if lt IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie6 oldie"> <![endif]-->
<!--[if IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie7 oldie"> <![endif]-->
<!--[if IE 8 ]> <html dir="ltr" lang="en-US" class="no-js ie8 oldie"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html dir="ltr" lang="en-US" class="no-js"><!--<![endif]-->

5.利用Modernizr工具

運(yùn)行的時(shí)候它會(huì)在html元素上添加一批CSS的class名稱外恕,這些class名稱標(biāo)記當(dāng)前瀏覽器支持哪些特性和不支持哪些特性杆逗,支持的特性就直接顯示該天特性的名稱作為一個(gè)class(例:canvas,websockets),不支持的特性顯示的class是“no-特性名稱”鳞疲。以下是IE9下生成的特征類型罪郊。

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

可以直接使用Modernizr在元素里生成的class名稱,在你的css文件里定義相應(yīng)的屬性以便支持當(dāng)前瀏覽器尚洽。例如悔橄,下面的代碼可以屬性,在支持shadow陰影的瀏覽器顯示shadow腺毫,不支持的瀏覽器顯示標(biāo)準(zhǔn)的邊框:

.boxshadow #MyContainer { 
border: none;
 -webkit-box-shadow: #666 1px 1px 1px;
 -moz-box-shadow: #666 1px 1px 1px;
} 
.no-boxshadow #MyContainer {
 border: 2px solid black;
}

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

  • 條件注釋

條件注釋 是于HTML源碼中被 IE 有條件解釋的語句癣疟。條件注釋可被用來向 IE提供及隱藏代碼。 條件注釋最初于微軟的 Internet Explorer 5瀏覽器中出現(xiàn)拴曲,并且直至 Internet Explorer 9 均支持争舞。微軟已宣布于IE10停止支持。

  • IE Hack

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

  • js 能力檢測

瀏覽器的能力檢測目標(biāo)不是檢測特定的瀏覽器澈灼,而是檢測瀏覽器的能力竞川。這樣,只需要檢測瀏覽器是否支持特定的能力叁熔,就可以給出特定的解決方案委乌。這一部分檢測是解決瀏覽器兼容問題的主要檢測。

  • html5shiv.js

用于解決IE9以下版本瀏覽器對HTML5新增標(biāo)簽不識別荣回,并導(dǎo)致CSS不起作用的問題遭贸。所以我們在使用過程中,想要讓低版本的瀏覽器心软,即IE9以下的瀏覽器支持壕吹,那么這款html5shiv.js是一個(gè)非常好的選擇!

  • respond.js

Respond.js 是一個(gè)小腳本删铃,用于為 IE6-8 以及其它不支持 CSS3 媒體查詢功能的瀏覽器提供媒體查詢的 min-width 和 max-width 特性耳贬,實(shí)現(xiàn)響應(yīng)式網(wǎng)頁設(shè)計(jì)。

  • css reset

將瀏覽器的默認(rèn)樣式全部去掉猎唁,更準(zhǔn)確說就是通過重新定義標(biāo)簽樣式咒劲。“覆蓋”瀏覽器的CSS默認(rèn)屬性诫隅。最最簡單的說法就是把瀏覽器提供的默認(rèn)樣式覆蓋掉腐魂!這就是CSS reset。

  • normalize.css

Normalize.css 是一個(gè)可以定制的CSS文件逐纬,它讓不同的瀏覽器在渲染網(wǎng)頁元素的時(shí)候形式更統(tǒng)一蛔屹。
它可以:
保留有用的默認(rèn)值,不同于許多 CSS reset 的簡單粗暴风题。
標(biāo)準(zhǔn)化的樣式判导,適用范圍廣的元素嫉父。
糾正錯(cuò)誤和常見的瀏覽器的不一致性。
一些細(xì)微的改進(jìn)眼刃,提高了易用性绕辖。
使用詳細(xì)的注釋來解釋代碼。

  • Modernizr

Modernizr 使你可以方便地為各種情況編寫 JavaScript 和 CSS擂红,無論瀏覽器是否支持這些特性仪际。這是處理漸進(jìn)增強(qiáng)的完美方案。
Modernizr 會(huì)在頁面加載后立即檢測特性昵骤;然后創(chuàng)建一個(gè)包含檢測結(jié)果的 JavaScript 對象树碱,同時(shí)在 html 元素加入方便你調(diào)整 CSS 的 class 名。

  • postCSS

它可以被理解為一個(gè)平臺变秦,可以讓一些插件在上面跑成榜,它提供了一個(gè)解析器,可以將CSS解析成抽象語法樹蹦玫,通過PostCSS這個(gè)平臺赎婚,我們能夠開發(fā)一些插件,來處理CSS樱溉。熱門插件如autoprefixer挣输,它可以幫我們處理兼容問題,只需正常寫CSS福贞,autoprefixer可以幫我的自動(dòng)生成兼容性代碼

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

http://caniuse.com/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市挖帘,隨后出現(xiàn)的幾起案子完丽,更是在濱河造成了極大的恐慌,老刑警劉巖拇舀,帶你破解...
    沈念sama閱讀 216,402評論 6 499
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件舰涌,死亡現(xiàn)場離奇詭異,居然都是意外死亡你稚,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評論 3 392
  • 文/潘曉璐 我一進(jìn)店門朱躺,熙熙樓的掌柜王于貴愁眉苦臉地迎上來刁赖,“玉大人,你說我怎么就攤上這事长搀∮畛冢” “怎么了?”我有些...
    開封第一講書人閱讀 162,483評論 0 353
  • 文/不壞的土叔 我叫張陵源请,是天一觀的道長枪芒。 經(jīng)常有香客問我彻况,道長,這世上最難降的妖魔是什么舅踪? 我笑而不...
    開封第一講書人閱讀 58,165評論 1 292
  • 正文 為了忘掉前任纽甘,我火速辦了婚禮,結(jié)果婚禮上抽碌,老公的妹妹穿的比我還像新娘悍赢。我一直安慰自己,他們只是感情好货徙,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,176評論 6 388
  • 文/花漫 我一把揭開白布左权。 她就那樣靜靜地躺著,像睡著了一般痴颊。 火紅的嫁衣襯著肌膚如雪赏迟。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,146評論 1 297
  • 那天蠢棱,我揣著相機(jī)與錄音锌杀,去河邊找鬼。 笑死裳扯,一個(gè)胖子當(dāng)著我的面吹牛抛丽,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播饰豺,決...
    沈念sama閱讀 40,032評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼亿鲜,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了冤吨?” 一聲冷哼從身側(cè)響起蒿柳,我...
    開封第一講書人閱讀 38,896評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎漩蟆,沒想到半個(gè)月后垒探,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,311評論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡怠李,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,536評論 2 332
  • 正文 我和宋清朗相戀三年圾叼,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片捺癞。...
    茶點(diǎn)故事閱讀 39,696評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡夷蚊,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出髓介,到底是詐尸還是另有隱情惕鼓,我是刑警寧澤,帶...
    沈念sama閱讀 35,413評論 5 343
  • 正文 年R本政府宣布唐础,位于F島的核電站箱歧,受9級特大地震影響矾飞,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜呀邢,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,008評論 3 325
  • 文/蒙蒙 一洒沦、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧驼鹅,春花似錦微谓、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至买乃,卻和暖如春姻氨,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背剪验。 一陣腳步聲響...
    開封第一講書人閱讀 32,815評論 1 269
  • 我被黑心中介騙來泰國打工肴焊, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人功戚。 一個(gè)月前我還...
    沈念sama閱讀 47,698評論 2 368
  • 正文 我出身青樓娶眷,卻偏偏與公主長得像,于是被迫代替她去往敵國和親啸臀。 傳聞我的和親對象是個(gè)殘疾皇子届宠,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,592評論 2 353

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

  • 為什么瀏覽器會(huì)存在兼容問題? 同一瀏覽器乘粒,版本越老豌注,存在bug越多,相對于版本越新的瀏覽器灯萍,對新屬性和標(biāo)簽轧铁、新特性...
    L怪丫頭閱讀 412評論 0 3
  • 1. 什么是 CSS hack 由于不同廠商的瀏覽器,比如Internet Explorer,Safari,Moz...
    andreaxiang閱讀 605評論 0 5
  • CSS hack 不同廠商的流覽器或某瀏覽器的不同版本(如IE6-IE11,Firefox/Safari/Oper...
    饑人谷_哈嚕嚕閱讀 196評論 0 0
  • 框架選擇 Bootstrap (>=ie8) jQuery 1.~ (>=ie6), jQuery 2.~ (>=...
    hui_mamba閱讀 269評論 0 0
  • 我希望我會(huì)是個(gè)話不多的理科生只敢在角落默默看你只想把你偷偷養(yǎng)在心里我收下你的笑旦棉,你的聲音齿风,你的長睫毛把他們鍛成加固...
    WONKA瓦南閱讀 200評論 0 3