現(xiàn)在就post一些做兼容的總結(jié)，可能不夠全面，但是可以告訴大家如何避過一些坑。主要測(cè)試了chrome，firefox，ie8、9、11，360瀏覽器。

一、基本的css兼容：

1、可能很多人喜歡用css hack的形式去兼容ie瀏覽器，但是我自己用起來感覺其實(shí)不好使 。ie7-就不考慮了，問題在哪呢，就在ie8的甑別上，你怎么讓樣式只對(duì)ie8起作用。上網(wǎng)搜你可能會(huì)得到這樣的答案：

但是實(shí)際上你一試就嗝屁了，因?yàn)閕e8他就是識(shí)別ie9能識(shí)別的，所以根本不能讓獨(dú)立的樣式只對(duì)ie8起作用。

更好用的是什么呢，是用ie瀏覽器獨(dú)有的文檔注釋的方式。像這樣：

屢試不爽，關(guān)鍵是可以獨(dú)立的維護(hù)處理兼容ie瀏覽器的樣式表，又不會(huì)淹沒在一大堆css hack標(biāo)識(shí)中，只需要在獨(dú)立對(duì)ie8應(yīng)用樣式規(guī)則的地方，copy該條規(guī)則，然后在前面加上 .ie8然后就能隨便寫了，對(duì)付ie9也一樣。

2、對(duì)于360雙核這種找抽瀏覽器，據(jù)說添加以下頭部meta信息可以使得網(wǎng)頁用webkit內(nèi)核渲染：  

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

IE=edge：保持使用最高級(jí)別模式顯示內(nèi)容；

chrome=1：谷歌的外掛插件Google Chrome Frame（谷歌內(nèi)嵌瀏覽器框架GCF），使用IE瀏覽網(wǎng)頁時(shí)實(shí)際上是使用Chrome瀏覽器內(nèi)核渲染，最低支持IE6，但前提是客戶端已經(jīng)安裝GCF。

但實(shí)際上這個(gè)meta標(biāo)識(shí)是ie瀏覽器所識(shí)別的（詳情：ies-compatibility-features-for-site-developers/)，并不是公認(rèn)的標(biāo)準(zhǔn)，所以用雙核的瀏覽器會(huì)傲嬌。當(dāng)然360也會(huì)傲嬌，所以有時(shí)你會(huì)發(fā)現(xiàn)360并不能總是（也可能是我本人rp差）以chrome內(nèi)核渲染你的按現(xiàn)代標(biāo)準(zhǔn)開發(fā)的網(wǎng)頁。

那么試試這個(gè)吧，添加：<meta name="renderer" content="webkit">

這個(gè)meta標(biāo)識(shí)是360自家實(shí)現(xiàn)的(詳情：meta.html)，表示強(qiáng)制要求360這造福中國(guó)社會(huì)萬千網(wǎng)民的瀏覽器用chrome的內(nèi)核渲染網(wǎng)頁。

ok，一行代碼搞定360絕大部分的兼容。

二、ie8的css兼容

現(xiàn)在說說ie8下的css問題：

1、ie8支持:first-child,但不支持:last-child。因?yàn)榍罢呤莄ss2.1標(biāo)準(zhǔn)，后者是css3標(biāo)準(zhǔn)。參下：

CSS 2.1 selectors：Basic CSS selectors including: * (universal selector), > (child selector), :first-child, :link, :visited, :active, :hover, :focus, :lang(), + (adjacent sibling selector), [attr], [attr="val"], [attr~="val"], [attr|="bar"], .foo (class selector), #foo (id selector)

2、 為什么會(huì)發(fā)現(xiàn)上面的奇怪的東西（怪我css2.1和css3分不清），因?yàn)榫幾gsass文件后發(fā)現(xiàn)ie8下的樣式基本全歇菜了。需要注意的是，如果瀏覽器 不支持的選擇器和支持的選擇器寫在一起，那么整條規(guī)則就不起作用了。比如你不小心創(chuàng)造了一個(gè)偽元素（是真的偽哦）.bb:bb-child, .cc{background:#333;}那么這整條規(guī)則就不起作用了，所有瀏覽器在此情況下都會(huì)歇菜,.cc的樣式就丟失了。

3、 input設(shè)置了左右padding，but輸入較多內(nèi)容時(shí)padding還是會(huì)消失。這個(gè)問題是無解的，ie瀏覽器她就是這么渲染input的，解決方法是在input 外面套一層div，用div設(shè)置左右padding，border，width和height，input只需要設(shè)置width和weight為100% 即可。另外，正常來講，如果沒有明確設(shè)置height的值，那么設(shè)置的line-height值就是height的值，but對(duì)于ie8，如果input 設(shè)置了 line-height，那么input必須設(shè)置height，否則input的內(nèi)容顯示有問題，會(huì)上下隱藏部分內(nèi)容，她就是要躲貓貓。 

4、 為什么上面我不用input的偽元素進(jìn)行設(shè)置而要嵌套多一層div呢？因?yàn)閕nput，img，iframe等元素不支持偽元素 -_-||。:before 和:after偽元素指定了一個(gè)元素文檔樹內(nèi)容之前和之后的內(nèi)容。與'content'屬性聯(lián)用,指定了插入的內(nèi)容（也就是你必須顯性設(shè)置content 屬性這兩個(gè)偽家伙才能在文檔中顯示出來，哪怕設(shè)置content屬性為空字符串也行）。作為DOM元素，偽元素都是在容器內(nèi)進(jìn)行渲染的, input，img，iframe等元素都不能包含其他元素，也就是不是容器，所以不能通過偽元素插入內(nèi)容。 

5、 table中如果不是嚴(yán)格的用于表格，而是用于奇葩的局部布局時(shí)（我也想問為什么用來布局。。），td設(shè)置成inline-block可以排成一行，但是 ie8和ie9 下，如果td中的內(nèi)容很長(zhǎng)，即使td設(shè)置了寬度，td也會(huì)撐開并占用td設(shè)置的margin（廢話，td是沒有margin可言的），直到擠占所有的td 寬度之和為tr的寬度。但是td設(shè)置成float：left；就能表現(xiàn)成block。這個(gè)不清楚為什么，但是管用。。 

6、父元素的左padding會(huì)和子元素的左margin重疊。這個(gè)是沒有好好實(shí)現(xiàn)盒子模型的事情了，包容吧。。 

7、sprite圖中的icons之間最好留空白間隔，哪怕間隔1px也好，否則ie8下會(huì)出現(xiàn)使用了某一個(gè)icon當(dāng)背景，icon后面跟著的其他icon也順帶顯示了一小部分的bug，所以icons之間還是要適當(dāng)留白，不要太省。 

三、ie11部分css問題

1、 ie11下很多元素表現(xiàn)和其他瀏覽器不一致，比如對(duì)應(yīng)用了同一樣式（不設(shè)置 高度）的div，其他瀏覽器解析的高度是一致的，但是ie11下該div有可能高度偏大，由此導(dǎo)致一些排版上的問題，所以，如果發(fā)現(xiàn)元素排版上下偏移的問題，查看此元素或其當(dāng)代元素是否設(shè)置了高度，統(tǒng)一添上高度一切都o(jì)k了。

2、抱歉，ie11問題確實(shí)不多。 

四、結(jié)尾附上一個(gè)關(guān)于css優(yōu)先級(jí)的奇談

首先我們知道：

1、id選擇器優(yōu)先級(jí)權(quán)重比class選擇器大一個(gè)數(shù)量級(jí)，class選擇器權(quán)重比標(biāo)簽選擇器大一個(gè)數(shù)量級(jí)；

2、class選擇器和屬性選擇器同優(yōu)先級(jí);

3、樣式的優(yōu)先程度需要根據(jù)第1條規(guī)則計(jì)算整體的優(yōu)先級(jí)，按選擇器權(quán)重計(jì)算各條樣式規(guī)則中所有選擇器優(yōu)先級(jí)之和，哪條規(guī)則權(quán)重大，那條就說了算。如果相同那么后面的覆蓋前面的。

4、像這種.dog > p開掛，多了特殊符號(hào)的，并不會(huì)增加優(yōu)勢(shì)，還是和 .dog p優(yōu)先級(jí)一樣。

然后可以拋出一個(gè)問題了：

對(duì)于下面的文檔結(jié)構(gòu)，分別對(duì) p | .p | div p | .parent | #parent設(shè)置color屬性，那么優(yōu)先級(jí)如何呢？

結(jié)果很有意思：

也就是 .p > div p > p > #parent > .parent

id選擇器居然比p選擇器優(yōu)先級(jí)還低！將p元素和div元素分開看，.p > div p > p 很正常， #parent > .parent也很正常。所以問題關(guān)鍵在子級(jí)p和父級(jí)#parent, 子級(jí)的選擇器優(yōu)先級(jí)比父級(jí)的選擇器優(yōu)先級(jí)高，或者說繼承的優(yōu)先級(jí)程度比自身的優(yōu)先級(jí)低！

嵌套多一層看看就知道是不是了，分別對(duì)#parent | div | p設(shè)置color屬性：

結(jié)果確實(shí)是p > div > #parent：

即使應(yīng)用兩個(gè)選擇器也無濟(jì)于事，依然是p >#parent div

但是只要能定位到p元素，那么父級(jí)選擇器的權(quán)重就起作用了,一試便知，對(duì)#parent p | #p 設(shè)置同樣的樣式結(jié)果是這樣的：

嗯，確實(shí)如此。所以：

5、css樣式優(yōu)先級(jí)還和繼承有關(guān)，繼承的優(yōu)先級(jí)不如本身應(yīng)用的優(yōu)先級(jí)高。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

原文：http://www.cnblogs.com/suspiderweb/p/5277540.html

最新評(píng)論