瀏覽器兼容的相關問題

1、什么是 CSS hack?

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

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

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

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

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

  • *,ie6,ie7可以識別;
  • _和- , ie6可以識別;
  • !important ,表示高優(yōu)先級,ie7及以上,firefox都支持,ie6認識帶!important的樣式屬性,但- - 不認識!important的優(yōu)先級;
  • -webkit- ,針對safari,chrome瀏覽器的內核CSS寫法
  • -moz-,針對firefox瀏覽器的內核CSS寫法
  • -ms-,針對ie內核的CSS寫法
  • -o-,針對Opera內核的CSS寫法

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

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

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

  • js 能力檢測
    瀏覽器的能力檢測目標不是檢測特定的瀏覽器,而是檢測瀏覽器的能力。這樣,只需要檢測瀏覽器是否支持特定的能力,就可以給出特定的解決方案。這一部分檢測是解決瀏覽器兼容問題的主要檢測。

  • html5shiv.js
    用于解決IE9以下版本瀏覽器對HTML5新增標簽不識別,并導致CSS不起作用的問題。所以我們在使用過程中,想要讓低版本的瀏覽器,即IE9以下的瀏覽器支持,那么這款html5shiv.js是一個非常好的選擇!

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

  • css reset
    將瀏覽器的默認樣式全部去掉,更準確說就是通過重新定義標簽樣式?!案采w”瀏覽器的CSS默認屬性。最最簡單的說法就是把瀏覽器提供的默認樣式覆蓋掉!這就是CSS reset。

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

    • 保留有用的默認值,不同于許多 CSS reset 的簡單粗暴。
    • 標準化的樣式,適用范圍廣的元素。
    • 糾正錯誤和常見的瀏覽器的不一致性。
    • 一些細微的改進,提高了易用性。
      -使用詳細的注釋來解釋代碼。
  • Modernizr
    Modernizr 使你可以方便地為各種情況編寫 JavaScript 和 CSS,無論瀏覽器是否支持這些特性。這是處理漸進增強的完美方案。
    Modernizr 會在頁面加載后立即檢測特性;然后創(chuàng)建一個包含檢測結果的 JavaScript 對象,同時在 html 元素加入方便你調整 CSS 的 class 名。

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

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

可以在此處進行檢測

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 什么是 CSS hack CSS hack是通過在CSS樣式中加入一些特殊的符號,讓不同的瀏覽器識別不同的符號(什...
    怎么昵稱閱讀 528評論 0 1
  • 什么是CSS hack CSS hack由于不同廠商的瀏覽器,比如Internet Explorer,Safari...
    尾巴尾巴尾巴閱讀 896評論 0 0
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 14,152評論 1 92
  • 什么是 CSS hack? CSS hank由于不同廠商的瀏覽器,比如IE,Safari,Chrome等,或者同一...
    饑人谷_tonya閱讀 720評論 0 0
  • CSS Hack 不同的瀏覽器對某些CSS代碼解析會存在一定的差異,因此就會導致不同瀏覽器下給用戶展示的頁面效果不...
    zx9426閱讀 479評論 0 0

友情鏈接更多精彩內容