瀏覽器兼容的相關(guān)問題

1笼踩、什么是 CSS hack?

由于不同廠商的流覽器或某瀏覽器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等)飒硅,對CSS的支持柄驻、解析不一樣狐树,導(dǎo)致在不同瀏覽器的環(huán)境中呈現(xiàn)出不一致的頁面展現(xiàn)效果。這時鸿脓,我們?yōu)榱双@得統(tǒng)一的頁面效果抑钟,就需要針對不同的瀏覽器或不同版本寫特定的CSS樣式,我們把這個針對不同的瀏覽器/不同版本寫相應(yīng)的CSS code的過程野哭,叫做CSS hack!

  • hack的原理
    由于不同的瀏覽器和瀏覽器各版本對CSS的支持及解析結(jié)果不一樣在塔,以及CSS優(yōu)先級對瀏覽器展現(xiàn)效果的影響,我們可以據(jù)此針對不同的瀏覽器情景來應(yīng)用不同的CSS拨黔。

2蛔溃、談一談瀏覽器兼容的思路?

  • 1.從產(chǎn)品的角度(產(chǎn)品的受眾、受眾的瀏覽器比例贺待、效果優(yōu)先還是基本功能優(yōu)先)
  • 2.成本的角度 (有無必要做某件事)
  • 3.做到什么程度讓哪些瀏覽器支持哪些效果
  • 4.根據(jù)兼容需求選擇技術(shù)框架/庫(jquery)
  • 5.根據(jù)兼容需求選擇兼容工具(html5shiv.js徽曲、respond.jscss reset麸塞、normalize.css秃臣、Modernizr)
    postCSS
    -6.條件注釋、CSS Hack哪工、js 能力檢測做一些修補

3奥此、列舉5種以上瀏覽器兼容的寫法

  • *,ie6,ie7可以識別正勒;
  • _和- 得院, ie6可以識別;
  • !important ,表示高優(yōu)先級章贞,ie7及以上,firefox都支持非洲,ie6認(rèn)識帶!important的樣式屬性鸭限,但- - 不認(rèn)識!important的優(yōu)先級;
  • -webkit- 两踏,針對safari败京,chrome瀏覽器的內(nèi)核CSS寫法
  • -moz-,針對firefox瀏覽器的內(nèi)核CSS寫法
  • -ms-梦染,針對ie內(nèi)核的CSS寫法
  • -o-赡麦,針對Opera內(nèi)核的CSS寫法

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是一個非常好的選擇蜓谋!

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

  • css reset
    將瀏覽器的默認(rèn)樣式全部去掉剑肯,更準(zhǔn)確說就是通過重新定義標(biāo)簽樣式」厶茫“覆蓋”瀏覽器的CSS默認(rèn)屬性让网。最最簡單的說法就是把瀏覽器提供的默認(rèn)樣式覆蓋掉!這就是CSS reset师痕。

  • normalize.css
    Normalize.css 是一個可以定制的CSS文件溃睹,它讓不同的瀏覽器在渲染網(wǎng)頁元素的時候形式更統(tǒng)一。
    它可以:

    • 保留有用的默認(rèn)值胰坟,不同于許多 CSS reset 的簡單粗暴因篇。
    • 標(biāo)準(zhǔn)化的樣式,適用范圍廣的元素笔横。
    • 糾正錯誤和常見的瀏覽器的不一致性竞滓。
    • 一些細(xì)微的改進,提高了易用性吹缔。
      -使用詳細(xì)的注釋來解釋代碼商佑。
  • Modernizr
    Modernizr 使你可以方便地為各種情況編寫 JavaScript 和 CSS,無論瀏覽器是否支持這些特性厢塘。這是處理漸進增強的完美方案茶没。
    Modernizr 會在頁面加載后立即檢測特性;然后創(chuàng)建一個包含檢測結(jié)果的 JavaScript 對象晚碾,同時在 html 元素加入方便你調(diào)整 CSS 的 class 名抓半。

  • postCSS
    它可以被理解為一個平臺,可以讓一些插件在其中運行迄薄,它提供了一個解析器琅关,可以將CSS解析成抽象語法樹,通過PostCSS這個平臺讥蔽,我們能夠開發(fā)一些插件涣易,來處理CSS。熱門插件如autoprefixer冶伞,它可以幫我們處理兼容問題新症,只需正常寫CSS,autoprefixer可以幫我的自動生成兼容性代碼响禽。

5徒爹、一般在那個網(wǎng)站查詢屬性的兼容性?

可以在此處進行檢測

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末荚醒,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子隆嗅,更是在濱河造成了極大的恐慌界阁,老刑警劉巖,帶你破解...
    沈念sama閱讀 207,113評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件胖喳,死亡現(xiàn)場離奇詭異泡躯,居然都是意外死亡,警方通過查閱死者的電腦和手機丽焊,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評論 2 381
  • 文/潘曉璐 我一進店門较剃,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人技健,你說我怎么就攤上這事写穴。” “怎么了雌贱?”我有些...
    開封第一講書人閱讀 153,340評論 0 344
  • 文/不壞的土叔 我叫張陵啊送,是天一觀的道長。 經(jīng)常有香客問我帽芽,道長删掀,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,449評論 1 279
  • 正文 為了忘掉前任导街,我火速辦了婚禮,結(jié)果婚禮上纤子,老公的妹妹穿的比我還像新娘搬瑰。我一直安慰自己,他們只是感情好控硼,可當(dāng)我...
    茶點故事閱讀 64,445評論 5 374
  • 文/花漫 我一把揭開白布泽论。 她就那樣靜靜地躺著,像睡著了一般卡乾。 火紅的嫁衣襯著肌膚如雪翼悴。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,166評論 1 284
  • 那天幔妨,我揣著相機與錄音鹦赎,去河邊找鬼。 笑死误堡,一個胖子當(dāng)著我的面吹牛古话,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播锁施,決...
    沈念sama閱讀 38,442評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼陪踩,長吁一口氣:“原來是場噩夢啊……” “哼杖们!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起肩狂,我...
    開封第一講書人閱讀 37,105評論 0 261
  • 序言:老撾萬榮一對情侶失蹤摘完,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后傻谁,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體孝治,經(jīng)...
    沈念sama閱讀 43,601評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,066評論 2 325
  • 正文 我和宋清朗相戀三年栅螟,在試婚紗的時候發(fā)現(xiàn)自己被綠了荆秦。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,161評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡力图,死狀恐怖步绸,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情吃媒,我是刑警寧澤瓤介,帶...
    沈念sama閱讀 33,792評論 4 323
  • 正文 年R本政府宣布,位于F島的核電站赘那,受9級特大地震影響刑桑,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜募舟,卻給世界環(huán)境...
    茶點故事閱讀 39,351評論 3 307
  • 文/蒙蒙 一祠斧、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧拱礁,春花似錦琢锋、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,352評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至鸯乃,卻和暖如春鲸阻,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背缨睡。 一陣腳步聲響...
    開封第一講書人閱讀 31,584評論 1 261
  • 我被黑心中介騙來泰國打工鸟悴, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人宏蛉。 一個月前我還...
    沈念sama閱讀 45,618評論 2 355
  • 正文 我出身青樓遣臼,卻偏偏與公主長得像,于是被迫代替她去往敵國和親拾并。 傳聞我的和親對象是個殘疾皇子揍堰,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,916評論 2 344

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

  • 什么是 CSS hack CSS hack是通過在CSS樣式中加入一些特殊的符號鹏浅,讓不同的瀏覽器識別不同的符號(什...
    怎么昵稱閱讀 383評論 0 1
  • 什么是CSS hack CSS hack由于不同廠商的瀏覽器,比如Internet Explorer,Safari...
    尾巴尾巴尾巴閱讀 775評論 0 0
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案屏歹? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補...
    _Yfling閱讀 13,728評論 1 92
  • 什么是 CSS hack隐砸? CSS hank由于不同廠商的瀏覽器,比如IE,Safari蝙眶,Chrome等季希,或者同一...
    饑人谷_tonya閱讀 641評論 0 0
  • CSS Hack 不同的瀏覽器對某些CSS代碼解析會存在一定的差異,因此就會導(dǎo)致不同瀏覽器下給用戶展示的頁面效果不...
    zx9426閱讀 378評論 0 0