瀏覽器兼容

hqman 發布于2019-08-29 17:12 / 3403人閱讀

摘要：一什么是瀏覽器兼容問題同一份代碼，有的瀏覽器顯示效果正常，有的瀏覽器顯示不正常二為什么會有瀏覽器兼容問題同一產品，版本越老越多同一產品，版本越新，功能越多。實際項目中大部分是針對瀏覽器不同版本之間的表現差異而引入的。

一、什么是瀏覽器兼容問題

同一份代碼，有的瀏覽器顯示效果正常，有的瀏覽器顯示不正常

二、為什么會有瀏覽器兼容問題

同一產品，版本越老 bug 越多

同一產品，版本越新，功能越多。老的瀏覽器還沒有這個功能，當然顯示有誤

不同瀏覽器，不同標準，不同效果。比如不同瀏覽器的內核都不一樣

三、用到的網站

1、caniuse.com 查CSS屬性兼容情況

2、browserhacks 查 Hack 的寫法

四、處理兼容問題的思路

1、要不要做

產品的角度（產品的受眾、受眾的瀏覽器比例、效果優先還是基本功能優先）
成本的角度 (有無必要做某件事)

2、做到什么程度

讓哪些瀏覽器支持哪些效果

3、如何做

（1）根據兼容需求選擇技術框架/庫(jquery)
（2）根據兼容需求選擇兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
postCSS
（3）條件注釋、CSS Hack、js 能力檢測做一些修補

五、漸進增強和優雅降級

漸進增強(progressive enhancement):
針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗
優雅降級 (graceful degradation):
一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。

六、處理兼容問題的方法 1、選擇合適的框架

（1）Bootstrap (>=ie8)
（2）jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
（3）Vue (>= ie9)
（4）react(兼容ie8)
不同的框架兼容的瀏覽器不一樣，在開發之前需要留意一下

2、條件注釋（又叫IE條件注釋）

條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語句。條件注釋可被用來向IE提供及隱藏代碼。

使用了條件注釋的頁面在 Windows Internet Explorer 9 中可正常工作，但在 Internet Explorer 10 中無法正常工作。 IE10不再支持條件注釋

3、CSS hack

（1）起因：由于不同廠商的瀏覽器（比如Internet Explorer,Safari,Mozilla Firefox,Chrome等），或者是同一廠商的瀏覽器的不同版本（如IE6和IE7），對CSS的解析認識不完全一樣，因此會導致生成的頁面效果不一樣，得不到我們所需要的頁面效果。

我們需要針對不同的瀏覽器去寫不同的CSS，讓它能在不同的瀏覽器中也能得到我們想要的頁面效果。實際項目中CSS Hack大部分是針對IE瀏覽器不同版本之間的表現差異而引入的。

（2）CSS hack表現形式
hack（黑客）利用不同瀏覽器的bug，來實現瀏覽器的兼容問題
CSS Hack大致有3種表現形式，CSS屬性前綴法、選擇器前綴法以及IE條件注釋法（即HTML頭部引用if IE）Hack

屬性前綴法(即類內部Hack)

例如 IE6能識別下劃線_和星號* ，
IE7能識別星號*，但不能識別下劃線_，
IE6~IE10都認識"9"，但firefox前述三個都不能認識

這些都是ie的bug，我們可以通過這些bug來識別ie的版本

.box{
  color: red;
  _color: blue; /*ie6*/
  *color: pink; /*ie67*/
  color: yellow9;  /*ie/edge 6-8*/
}

選擇器前綴法(即選擇器Hack)

IE條件注釋法(即HTML條件注釋Hack)

針對所有IE(注：IE10+已經不再支持條件注釋)： ;
針對IE6及以下版本：。
這類Hack不僅對CSS生效，對寫在判斷語句里面的所有代碼都會生效

(3)舉個栗子

.target{
  display: inline-block;//inline-block在ie以上才支持
  *display: inline; //設置它為inline元素
  *zoom: 1;//是ie67比較老的功能，可以觸發ie的haslayout，生成類似bfc的效果
}

.clearfix:after{
  content: "";
  display: block;
  clear: both;
}
.clearfix{
  *zoom: 1; /* 僅對ie67有效，可以用來清除浮動*/
}

總結：css hack 就是為了將某些功能兼容ie的低版本，換了一種寫法來實現功能。然后利用ie的bug，通過*或者_來執行一些只有低版本ie能識別的代碼。


  //如果是移動端的，增加一個iem7的class
  //如果是小于ie7，增加一個ie6的class
  //如果是ie7，增加一個ie7的class
  // 如果是ie7，增加一個ie7的class

可以如圖去使用class。就像給不同ie瀏覽器添加class屬性，通過.class來選中某個瀏覽器，對應的給它添加一些功能。就不用通過瀏覽器的bug來選擇ie瀏覽器了。

七：常見css屬性的兼容情況

inline-block: >=ie8

min-width/min-height: >=ie8

:before,:after: >=ie8

div:hover: >=ie7

inline-block: >=ie8

background-size: >=ie9

圓角: >= ie9

陰影: >= ie9

動畫/漸變: >= ie10

八：處理兼容的開發工具

html5shiv.js
respond.js
css reset
normalize.css
Modernizr
這是處理兼容思路的轉變，之前處理兼容處理的是瀏覽器。而Modernizr方法不關心瀏覽器，幫助探測瀏覽器是否支持某種新特性，也就是說Modernizr只關心有沒有對應的css特性。
運行的時候它會在html元素上添加一批CSS的class名稱，這些class名稱標記當前瀏覽器支持哪些特性和不支持哪些特性
詳情見文檔：Modernizr介紹文章

GPU云服務器云服務器 js兼容瀏覽器兼容多瀏覽器兼容兼容多瀏覽器 js瀏覽器兼容

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114172.html

瀏覽器兼容（CSS部分）

摘要：對瀏覽器兼容問題，一般分，，兼容，兼容。特別是增加了許多新標簽，低版本瀏覽器會存在不兼容的情況。出現這個問題的原因是之前的瀏覽器都會給標簽一個最小默認的行高的高度。 **我所說的兼容性問題，主要是說IE與幾個主流瀏覽器如firefox，google等。而對IE瀏覽器來說，IE7又是個跨度，因為之前的版本更新甚慢，bug甚多。從IE8開始，IE瀏覽器漸漸遵循標準，到IE9后由于大家都一致...

gityuan 2019-08-29 16:05 評論0 收藏0
轉載：瀏覽器常見兼容問題以及解決辦法

摘要：瀏覽器兼容問題四行內屬性標簽，設置后采用布局，又有橫行的的情況，間距問題癥狀里的間距比超過設置的間距碰到幾率解決方案在后面加入備注行內屬性標簽，為了設置寬高，我們需要設置除了標簽比較特殊。 (1)瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補丁和內補丁不同問題癥狀：隨便寫幾個標簽，不加樣式控制的情況下，各自的margin 和padding差異較大。碰到頻率:100%解決方案：CSS里 *...

AaronYuan 2019-08-29 12:38 評論0 收藏0
轉載：瀏覽器常見兼容問題以及解決辦法

摘要：瀏覽器兼容問題四行內屬性標簽，設置后采用布局，又有橫行的的情況，間距問題癥狀里的間距比超過設置的間距碰到幾率解決方案在后面加入備注行內屬性標簽，為了設置寬高，我們需要設置除了標簽比較特殊。 (1)瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補丁和內補丁不同問題癥狀：隨便寫幾個標簽，不加樣式控制的情況下，各自的margin 和padding差異較大。碰到頻率:100%解決方案：CSS里 *...

aboutU 2019-08-20 16:40 評論0 收藏0
轉載：瀏覽器常見兼容問題以及解決辦法

摘要：瀏覽器兼容問題四行內屬性標簽，設置后采用布局，又有橫行的的情況，間距問題癥狀里的間距比超過設置的間距碰到幾率解決方案在后面加入備注行內屬性標簽，為了設置寬高，我們需要設置除了標簽比較特殊。 (1)瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補丁和內補丁不同問題癥狀：隨便寫幾個標簽，不加樣式控制的情況下，各自的margin 和padding差異較大。碰到頻率:100%解決方案：CSS里 *...

617035918 2019-08-01 16:51 評論0 收藏0
DIV+CSS IE6/IE7/IE8/FF兼容問題匯總

摘要：下兼容問題，這個最好處理，轉化成兼容就可以。暫時還沒找到專用的兼容。高度不適應高度不適應是當內層對象的高度發生變化時外層高度不能自動進行調節，特別是當內層對象使用或時。只是目前并不支持。以上都是寫中的一些兼容，建議遵循 1.IE8下兼容問題，這個最好處理，轉化成ie7兼容就可以。在頭部加如下一段代碼，然后只要在IE7下兼容了，IE8下面也就兼容了 2.flaot浮動造成IE6下面...

silvertheo 2019-08-28 18:06 評論0 收藏0