成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

瀏覽器兼容

hqman / 3432人閱讀

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

一、什么是瀏覽器兼容問(wèn)題

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

二、為什么會(huì)有瀏覽器兼容問(wèn)題

同一產(chǎn)品，版本越老 bug 越多

同一產(chǎn)品，版本越新，功能越多。老的瀏覽器還沒(méi)有這個(gè)功能，當(dāng)然顯示有誤

不同瀏覽器，不同標(biāo)準(zhǔn)，不同效果。比如不同瀏覽器的內(nèi)核都不一樣

三、用到的網(wǎng)站

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

2、browserhacks 查 Hack 的寫法

四、處理兼容問(wèn)題的思路

1、要不要做

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

2、做到什么程度

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

3、如何做

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

五、漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)

漸進(jìn)增強(qiáng)(progressive enhancement):
針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面，保證最基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)
優(yōu)雅降級(jí) (graceful degradation):
一開(kāi)始就構(gòu)建完整的功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。

六、處理兼容問(wèn)題的方法 1、選擇合適的框架

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

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

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

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

3、CSS hack

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

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

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

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

例如 IE6能識(shí)別下劃線_和星號(hào)* ，
IE7能識(shí)別星號(hào)*，但不能識(shí)別下劃線_，
IE6~IE10都認(rèn)識(shí)"9"，但firefox前述三個(gè)都不能認(rèn)識(shí)

這些都是ie的bug，我們可以通過(guò)這些bug來(lái)識(shí)別ie的 版本

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

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

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

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

(3)舉個(gè)栗子

.target{
  display: inline-block;//inline-block在ie以上才支持
  *display: inline; //設(shè)置它為inline元素
  *zoom: 1;//是ie67比較老的功能，可以觸發(fā)ie的haslayout，生成類似bfc的效果
}
.clearfix:after{
  content: "";
  display: block;
  clear: both;
}
.clearfix{
  *zoom: 1; /* 僅對(duì)ie67有效，可以用來(lái)清除浮動(dòng)*/
}

總結(jié)：css hack 就是為了將某些功能兼容ie的低版本，換了一種寫法來(lái)實(shí)現(xiàn)功能。然后利用ie的bug，通過(guò)*或者_(dá)來(lái)執(zhí)行一些只有低版本ie能識(shí)別的代碼。


  //如果是移動(dòng)端的，增加一個(gè)iem7的class
  //如果是小于ie7，增加一個(gè)ie6的class
  //如果是ie7，增加一個(gè)ie7的class
  // 如果是ie7，增加一個(gè)ie7的class

可以如圖去使用class。就像給不同ie瀏覽器添加class屬性，通過(guò).class來(lái)選中某個(gè)瀏覽器，對(duì)應(yīng)的給它添加一些功能。就不用通過(guò)瀏覽器的bug來(lái)選擇ie瀏覽器了。

七：常見(jiàn)css屬性的兼容情況

inline-block: >=ie8

min-width/min-height: >=ie8

:before,:after: >=ie8

div:hover: >=ie7

inline-block: >=ie8

background-size: >=ie9

圓角: >= ie9

陰影: >= ie9

動(dòng)畫(huà)/漸變: >= ie10

八：處理兼容的開(kāi)發(fā)工具

html5shiv.js
respond.js
css reset
normalize.css
Modernizr
這是處理兼容思路的轉(zhuǎn)變，之前處理兼容處理的是瀏覽器。而Modernizr方法不關(guān)心瀏覽器，幫助探測(cè)瀏覽器是否支持某種新特性，也就是說(shuō)Modernizr只關(guān)心有沒(méi)有對(duì)應(yīng)的css特性。
運(yùn)行的時(shí)候它會(huì)在html元素上添加一批CSS的class名稱，這些class名稱標(biāo)記當(dāng)前瀏覽器支持哪些特性和不支持哪些特性
詳情見(jiàn)文檔：Modernizr介紹文章

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/114172.html

相關(guān)文章

  • 瀏覽器兼容（CSS部分）

    摘要：對(duì)瀏覽器兼容問(wèn)題，一般分，，兼容，兼容。特別是增加了許多新標(biāo)簽，低版本瀏覽器會(huì)存在不兼容的情況。出現(xiàn)這個(gè)問(wèn)題的原因是之前的瀏覽器都會(huì)給標(biāo)簽一個(gè)最小默認(rèn)的行高的高度。 **我所說(shuō)的兼容性問(wèn)題，主要是說(shuō)IE與幾個(gè)主流瀏覽器如firefox，google等。而對(duì)IE瀏覽器來(lái)說(shuō)，IE7又是個(gè)跨度，因?yàn)橹暗陌姹靖律趼?，bug甚多。從IE8開(kāi)始，IE瀏覽器漸漸遵循標(biāo)準(zhǔn)，到IE9后由于大家都一致...

    gityuan 評(píng)論0 收藏0

  • 轉(zhuǎn)載：瀏覽器常見(jiàn)兼容問(wèn)題以及解決辦法

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

    AaronYuan 評(píng)論0 收藏0

  • 轉(zhuǎn)載：瀏覽器常見(jiàn)兼容問(wèn)題以及解決辦法

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

    aboutU 評(píng)論0 收藏0

  • 轉(zhuǎn)載：瀏覽器常見(jiàn)兼容問(wèn)題以及解決辦法

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

    617035918 評(píng)論0 收藏0

  • DIV+CSS IE6/IE7/IE8/FF兼容問(wèn)題匯總

    摘要：下兼容問(wèn)題，這個(gè)最好處理，轉(zhuǎn)化成兼容就可以。暫時(shí)還沒(méi)找到專用的兼容。高度不適應(yīng)高度不適應(yīng)是當(dāng)內(nèi)層對(duì)象的高度發(fā)生變化時(shí)外層高度不能自動(dòng)進(jìn)行調(diào)節(jié)，特別是當(dāng)內(nèi)層對(duì)象使用或時(shí)。只是目前并不支持。以上都是寫中的一些兼容，建議遵循 1.IE8下兼容問(wèn)題，這個(gè)最好處理，轉(zhuǎn)化成ie7兼容就可以。在頭部加如下一段代碼，然后只要在IE7下兼容了，IE8下面也就兼容了 2.flaot浮動(dòng)造成IE6下面...

    silvertheo 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

hqman

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<