主流瀏覽器css兼容問題的總結

時間 2019-11-19

原文原文鏈接

最近又搞了一波網站的兼容,因爲要求ie瀏覽器仍是要兼容到ie8，因此調起來仍是各類蛋疼。css

如今就post一些作兼容的總結，可能不夠全面，可是能夠告訴你們如何避過一些坑。主要測試了chrome，firefox，ie八、九、11，360瀏覽器。html

1、基本的css兼容：css3

一、可能不少人喜歡用css hack的形式去兼容ie瀏覽器，可是我本身用起來感受其實很差使。ie7-就不考慮了，問題在哪呢，就在ie8的甑別上，你怎麼讓樣式只對ie8起做用。上網搜你可能會獲得這樣的答案：web

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

可是實際上你一試就嗝屁了，由於ie8他就是識別ie9能識別的，因此根本不能讓獨立的樣式只對ie8起做用。chrome

（這個hack是能夠區分ie8和ie9的，以前因爲未知緣由致使瀏覽器測試不成功，重裝系統後發現是可用的，後來又在多臺機器上測試過，證實是正確的。很抱歉誤導了你們，特此修正，仍然建議用文檔註釋的方式去獨立寫hack，固然最好是能夠優雅降級，避免使用css hack。）瀏覽器

更好用的是什麼呢，是用ie瀏覽器獨有的文檔註釋的方式。像這樣：sass

<!DOCTYPE html> <!--[if IE 8 ]> <html class="ie8" lang="en"> <![endif]--> <!--[if IE 9 ]> <html class="ie9" lang="en"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->

屢試不爽，關鍵是能夠獨立的維護處理兼容ie瀏覽器的樣式表，又不會淹沒在一大堆css hack標識中，只須要在獨立對ie8應用樣式規則的地方，copy該條規則，而後在前面加上 .ie8而後就能隨便寫了，對付ie9也同樣。框架

二、對於360雙核這種找抽瀏覽器，聽說添加如下頭部meta信息可使得網頁用webkit內核渲染： ide

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

IE=edge：保持使用最高級別模式顯示內容；佈局

chrome=1：谷歌的外掛插件Google Chrome Frame（谷歌內嵌瀏覽器框架GCF），使用IE瀏覽網頁時其實是使用Chrome瀏覽器內核渲染，最低支持IE6，但前提是客戶端已經安裝GCF。

但實際上這個meta標識是ie瀏覽器所識別的（詳情：ies-compatibility-features-for-site-developers/)，並非公認的標準，因此用雙核的瀏覽器會傲嬌。固然360也會傲嬌，因此有時你會發現360並不能老是（也多是我本人rp差）以chrome內核渲染你的按現代標準開發的網頁。

那麼試試這個吧，添加：<meta name="renderer" content="webkit">

這個meta標識是360自家實現的(詳情：meta.html)，表示強制要求360這造福中國社會萬千網民的瀏覽器用chrome的內核渲染網頁。

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

2、ie8的css兼容

如今說說ie8下的css問題：

一、ie8支持:first-child,但不支持:last-child。由於前者是css2.1標準，後者是css3標準。參下：

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)

二、爲何會發現上面的奇怪的東西（怪我css2.1和css3分不清），由於編譯sass文件後發現ie8下的樣式基本全歇菜了。須要注意的是，若是瀏覽器不支持的選擇器和支持的選擇器寫在一塊兒，那麼整條規則就不起做用了。好比你不當心創造了一個僞元素（是真的僞哦）.bb:bb-child, .cc{background:#333;}那麼這整條規則就不起做用了，全部瀏覽器在此狀況下都會歇菜,.cc的樣式就丟失了。

三、 input設置了左右padding，but輸入較多內容時padding仍是會消失。這個問題是無解的，ie瀏覽器她就是這麼渲染input的，解決方法是在input 外面套一層div，用div設置左右padding，border，width和height，input只須要設置width和weight爲100% 便可。另外，正常來說，若是沒有明確設置height的值，那麼設置的line-height值就是height的值，but對於ie8，若是input 設置了 line-height，那麼input必須設置height，不然input的內容顯示有問題，會上下隱藏部份內容，她就是要躲貓貓。

四、爲何上面我不用input的僞元素進行設置而要嵌套多一層div呢？由於input，img，iframe等元素不支持僞元素 -_-||。:before 和:after僞元素指定了一個元素文檔樹內容以前和以後的內容。與'content'屬性聯用,指定了插入的內容（也就是你必須顯性設置content 屬性這兩個僞傢伙才能在文檔中顯示出來，哪怕設置content屬性爲空字符串也行）。做爲DOM元素，僞元素都是在容器內進行渲染的, input，img，iframe等元素都不能包含其餘元素，也就是否是容器，因此不能經過僞元素插入內容。

五、 table中若是不是嚴格的用於表格，而是用於奇葩的局部佈局時（我也想問爲何用來佈局。。），td設置成inline-block能夠排成一行，可是 ie8和ie9 下，若是td中的內容很長，即便td設置了寬度，td也會撐開並佔用td設置的margin（廢話，td是沒有margin可言的），直到擠佔全部的td 寬度之和爲tr的寬度。可是td設置成float：left；就能表現成block。這個不清楚爲何，可是管用。。

六、父元素的左padding會和子元素的左margin重疊。這個是沒有好好實現盒子模型的事情了，包容吧。。

七、sprite圖中的icons之間最好留空白間隔，哪怕間隔1px也好，不然ie8下會出現使用了某一個icon當背景，icon後面跟着的其餘icon也順帶顯示了一小部分的bug，因此icons之間仍是要適當留白，不要太省。

3、ie11部分css問題

一、 ie11下不少元素表現和其餘瀏覽器不一致，好比對應用了同同樣式（不設置高度）的div，其餘瀏覽器解析的高度是一致的，可是ie11下該div有可能高度偏大，由此致使一些排版上的問題，因此，若是發現元素排版上下偏移的問題，查看此元素或其當代元素是否設置了高度，統一添上高度一切都ok了。

二、抱歉，ie11問題確實很少。

4、結尾附上一個關於css優先級的奇談

首先咱們知道：

一、id選擇器優先級權重比class選擇器大一個數量級，class選擇器權重比標籤選擇器大一個數量級；

二、class選擇器和屬性選擇器同優先級;

三、樣式的優先程度須要根據第1條規則計算總體的優先級，按選擇器權重計算各條樣式規則中全部選擇器優先級之和，哪條規則權重大，那條就說了算。若是相同那麼後面的覆蓋前面的。

四、像這種.dog > p開掛，多了特殊符號的，並不會增長優點，仍是和 .dog p優先級同樣。

而後能夠拋出一個問題了：

對於下面的文檔結構，分別對 p | .p | div p | .parent | #parent設置color屬性，那麼優先級如何呢？

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

結果頗有意思：

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

id選擇器竟然比p選擇器優先級還低！將p元素和div元素分開看，.p > div p > p 很正常， #parent > .parent也很正常。因此問題關鍵在子級p和父級#parent, 子級的選擇器優先級比父級的選擇器優先級高，或者說繼承的優先級程度比自身的優先級低！

嵌套多一層看看就知道是否是了，分別對#parent | div | p設置color屬性：

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

結果確實是p > div > #parent：

即便應用兩個選擇器也無濟於事，依然是p >#parent div

可是只要能定位到p元素，那麼父級選擇器的權重就起做用了,一試便知，對#parent p | #p 設置一樣的樣式結果是這樣的：

嗯，確實如此。因此：

五、css樣式優先級還和繼承有關，繼承的優先級不如自己應用的優先級高。

總結完畢，敬禮。

-------------------------------本文地址： http://www.cnblogs.com/suspiderweb/p/5277540.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。