主流瀏覽器css兼容問(wèn)題匯總

發(fā)布時(shí)間：2016-03-15 10:33:28 作者：佚名

我要評(píng)論

這篇文章主要幫助大家梳理主流瀏覽器css兼容的相關(guān)問(wèn)題，對(duì)主流瀏覽器css兼容問(wèn)題進(jìn)行匯總，感興趣的小伙伴們可以參考一下

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

一、基本的css兼容：

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

CSS Code復(fù)制內(nèi)容到剪貼板

.selector {
　　color: #ff0\0;/*ie8*/
　　color: #f00\9\0;/*ie9+*/
}

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

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<!DOCTYPE html>
<html lang="en">

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

2、對(duì)于360雙核這種找抽瀏覽器，據(jù)說(shuō)添加以下頭部meta信息可以使得網(wǎng)頁(yè)用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)頁(yè)時(shí)實(shí)際上是使用Chrome瀏覽器內(nèi)核渲染，最低支持IE6，但前提是客戶(hù)端已經(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)開(kāi)發(fā)的網(wǎng)頁(yè)。

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

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

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

二、ie8的css兼容

現(xiàn)在說(shuō)說(shuō)ie8下的css問(wèn)題：

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下的樣式基本全歇菜了。需要注意的是，如果瀏覽器不支持的選擇器和支持的選擇器寫(xiě)在一起，那么整條規(guī)則就不起作用了。比如你不小心創(chuàng)造了一個(gè)偽元素（是真的偽哦）.bb:bb-child, .cc{background:#333;}那么這整條規(guī)則就不起作用了，所有瀏覽器在此情況下都會(huì)歇菜,.cc的樣式就丟失了。

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

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

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

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

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

三、ie11部分css問(wèn)題

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

2、抱歉，ie11問(wèn)題確實(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)重大，那條就說(shuō)了算。如果相同那么后面的覆蓋前面的。

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

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

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<div id="parent" class="parent">
<p class="p">p</p>
</div>

結(jié)果很有意思：

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

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

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

復(fù)制代碼

代碼如下:

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