【轉】CSS瀏覽器兼容性與解析問題終極概括

時間 2019-11-09

原文原文鏈接

1.怪異模式問題：漏寫DTD聲明，Firefox仍然會按照標準模式來解析網頁，但在IE中會觸發怪異模式。爲避免怪異模式給咱們帶來沒必要要的麻煩，最好養成書寫DTD聲明的好習慣。css

2.IE6雙邊距問題：在IE6下，若是對元素設置了浮動，同時又設置了margin-left或margin-right，margin值會加倍。例如：html

HTML：jquery

<div class="myDiv"></div>

CSS：算法

.myDiv{ width:100px; height:100px; border:1px solid #000; float:left; margin-left:30px; }

Firefox預覽結果：瀏覽器

IE6預覽結果：app

很明顯的，在IE6中，margin-left:30px的邊距翻倍成60px了。框架

解決問題：佈局

設置display:inline：測試

.myDiv{ width:100px; height:100px; border:1px solid #000; float:left; display:inline; margin-left:30px; }

IE6預覽結果：優化

3.上下margin重合：margin是個有點特殊的樣式，相鄰的margin-left和margin-right是不會重合的，但相鄰的margin-top和margin-bottom會產生重合。無論IE仍是Firefox都存在這問題。例如：

HTML：

<div class="topDiv"></div> <div class="bottomDiv"></div>

CSS：

.topDiv{ width:100px; height:100px; border:1px solid #000; margin-bottom:25px; } .bottomDiv{ width:100px; height:100px; border:1px solid #000; margin-top:50px; }

咱們對上面的div設置了25px的下邊距，對下方的div設置了50px的上邊距。爲了便於觀察，這裏將div的高度都設爲100px。

瀏覽器預覽結果：

可見，結果不是預期的上下div拉開75px的距離，而是拉開了半個div高度(50px)的距離。

解決問題：

統一使用margin-top或者margin-bottom，不要混合使用。這並非技術上的必需，但倒是個良好的習慣。

4.超連接訪問後hover樣式不出現：有時候咱們同時設置了a:visited和a:hover樣式，但一旦超連接訪問後，hover的樣式就再也不出現，這是怎麼回事呢？是由於將樣式順序放錯了，調整爲先a:visited再a:hover。關於a標籤的四種狀態的排序問題，有個簡單好記的原則，叫作love hate原則，即i(link)ov(visited)e h(hover)a(active)e。

5.IE六、IE7的hasLayout問題：不少時候，CSS在IE下的解析十分奇怪，明明在Firefox中顯示得很是正確，但到了IE下卻出現了問題，有的時候，這些問題甚至表現得很是詭異。

例如一個比較經典的Bug就是設置border的時候，有時候border會斷開，刷新頁面或者拖下滾動條的時候，斷掉的部分又會鏈接起來。

再好比在IE6&IE7中對元素設置浮動後，其後的元素並未佔據這部分空間，形成了IE6&IE7中浮動元素未脫離文檔流的假象。也就是說，實際上IE6&IE7浮動元素也脫離了文檔流，只是因爲其後元素的hasLayout被自動觸發而致使的。這裏說的hasLayout被觸發，即指元素的hasLayout屬性爲true。

下列元素默認hasLayout="true"：

<html>, <body>
<table>, <tr>, <th>, <td>
<img>
<hr>
<input>, <button>, <select>, <textarea>, <fieldset>, <legend>
<iframe>, <embed>, <object>, <applet>
<marquee>

下列 CSS 屬性和取值將會自動讓一個元素的hasLayout="true"：

position: absolute 絕對定位元素的包含區塊(containing block)就會常常在這一方面出問題。
float: left|right 因爲 layout 元素的特性，浮動模型會有不少怪異的表現。
display: inline-block 當一個內聯級別的元素須要 layout 的時候每每就要用到它，這也可能也是這個 CSS 屬性的惟一效果–讓某個元素擁有 layout。"inline-block行爲"在IE中是能夠實現的，可是須要注意的是： IE/Win: inline-block and hasLayout 。
width: 除「auto" 外的任意值不少人遇到 layout 相關問題發生時，通常都會先嚐試用這個來修復。
height: 除「auto" 外的任意值 height: 1% 就在 Holly Hack 中用到。
zoom: 除「normal" 外的任意值 IE專有屬性。不過 zoom: 1 能夠臨時用作調試。
writing-mode: tb-rl MS專有屬性。
overflow: hidden|scroll|auto 在 IE7 中，overflow 也變成了一個 layout 觸發器，這個屬性在以前版本 IE 中沒有觸發 layout 的功能。
overflow-x|-y: hidden|scroll|auto overflow-x 和 overflow-y 是 CSS3 盒模型中的屬性，還沒有獲得瀏覽器的普遍支持。他們在以前版本IE中沒有觸發 layout 的功能。
另外 IE7 的熒幕上又新添了幾個 haslayout 的演員，若是隻從 hasLayout 這個方面考慮，min/max 和 width/height 的表現相似，position 的 fixed 和 absolute 也是如出一轍。
position: fixed
min-width: 任意值就算設爲0也可讓該元素得到 layout。
max-width: 除「none" 以外的任意值
min-height: 任意值。即便設爲0也可讓該元素的 haslayout=true
max-height: 除「none" 以外的任意值

若是BUG是因爲hasLayout未觸發所引發的，則可採用手動觸發hasLayout來解決：辦法是使用一個生僻的CSS屬性zoom來觸發，引用樣式.zoom{zoom:1}。

若是BUG是hasLayout被自動觸發而引發的，則要看觸發是什麼引發的，若這元素自己就會自動觸發hasLayout，能夠考慮換一個元素。如果對於這元素設置的某個CSS屬性引發的，則能夠考慮刪除這屬性，假若這屬性又是必要的，則就須要本身根據具體狀況去編寫CSS Hack，由於hasLayout是隻讀的，一旦hasLayout="true"後，便不可逆轉。

6.行內元素上下margin及padding不拉開元素間距的問題：行內元素的margin和padding屬性很奇怪，水平方向的padding-left、padding-right、margin-left、margin-right都產生邊距效果，但豎直方向的padding-top、padding-bottom、margin-top、margin-bottom卻不會產生邊距效果。例如：

HTML：

<div>塊級元素</div> <span>行內元素</span>

CSS:

div{background:gray;padding:20px;} span{background:green;padding:20px;margin:20px;}

各瀏覽器預覽結果：

可見豎直方向的padding、margin雖然增大了行內元素的面積，但並無和相鄰元素拉開距離，致使了元素重疊。

解決問題：

將行內元素display設置爲block便可解決

修改後CSS：

span{background:green;padding:20px;margin:20px;display:block;}

各瀏覽器預覽結果：

但因爲塊級元素與行內元素的默認樣式不一樣，可能會所以書寫額外的樣式代碼。好比width樣式，由於塊級元素默認佔據整行。

7.IE6下select元素顯示問題：瀏覽器解析頁面時，會先判斷元素的類型，若是是窗口類型的，會優先於非窗口類型的元素，顯示在頁面最頂端，若是同屬於非窗口類型的，纔會去判斷z-index的大小。select元素在IE6下是以窗口形式顯示的，這是IE6的一個Bug。致使的狀況是每每想要彈出一個層，結果select元素出如今層上方。例如：

HTML：

<select><option>=請選擇=</option></select> <div></div>

CSS：

div{ position:absolute; background:#CCDCEE; top:0px; left:0px; width:300px; height:300px; border:1px solid #000; margin:5px; }

IE6預覽結果：

解決問題：

咱們能夠用一個和彈出層一樣大小的iframe放在層下面，select上面，用iframe遮住select。好比設置彈出層的樣式z-index:2，iframe的樣式z-index:1，使iframe位於層下方。

修改後HTML：

<select><option>=請選擇=</option></select> <div></div> <iframe src="xx.htm"></iframe>

修改後CSS：

div{ position:absolute; background:#CCDCEE; top:0px; left:0px; width:300px; height:300px; border:1px solid #000; margin:5px; z-index:2; } iframe{ position:absolute; top:0px; left:0px; width:300px; height:300px; margin:5px; z-index:1; }

咱們讓iframe位於div下方，大小以及與瀏覽器的距離調整成與div一致。

IE6預覽結果：

8.IE6對png的透明度支持問題：png格式由於其優秀的壓縮算法和對透明度的完美支持，成爲Web中最流行的圖片格式之一。但它存在一個衆所周知的頭疼問題---IE6下對png的透明度支持並很差。本該是透明的地方，在IE6下會顯示爲淺藍色。可使用IE下私有的濾鏡功能來解決問題，格式以下：filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='png圖片路徑',sizingMethod='crop')。

9.ul的不一樣表現：ul列表也是在IE與Firefox中容易發生問題的對象，主要源自瀏覽器對ul對象的默認值設置。在IE與Firefox中，一部分對象有默認的屬性（好比h1~h6），他們自己就帶有大字號、加粗樣式以及一些邊距效果。ul也是如此，默認狀況下ul是有邊距的。例如：

HTML：

<div id="layout">  <ul>  <li>菜單一</li>  <li>菜單二</li>  <li>菜單三</li>  </ul> </div>

CSS：

#layout{border:1px solid #333;} ul{list-style:none;}

代碼很是簡單，僅去除了ul的列表圓點。看下在IE和Firefox的預覽效果：

IE預覽結果：

Firefox預覽結果：

顯示都很正常，關鍵在於咱們對ul接下來的設置：

修改後的CSS：

#layout{border:1px solid #333;} ul{ list-style:none; margin-left:0px; }

設置ul左外邊距爲0後。

IE預覽結果：

Firefox預覽結果：

預覽後發現問題出現了。IE中的ul已與div靠齊，而Firefox中的ul卻絲絕不動。這是爲何？不妨把樣式修改下再看看。

修改後的CSS：

#layout{border:1px solid #333;} ul{ list-style:none; padding-left:0px; }

此次咱們把margin-left換成padding-left。再來看看預覽結果。

IE預覽結果：

Firefox預覽結果：

可見效果正好相反，Firefox中實現了靠齊，而IE中絲毫未動。

經過以上例子咱們發現：在IE中，ul的默認邊距是margin，在Firefox中，ul的默認邊距是padding。咱們單獨定義margin或padding時，天然不能在兩個瀏覽器達到一致效果。這就是ul在不一樣瀏覽器下表現不一樣的問題所在。

解決問題：

能夠用hack方法分別針對IE和Firefox單獨寫樣式，但更好的作法是樣式開頭先統一ul邊距，ul{padding:0px;margin:0px;}。

10.IE3px問題：3px問題不是常常被人發現，由於它的影響只產生3px的位移。若是是精確到像素級的設計，3px的影響可謂不小。先來看下例子：

HTML：

<div id="left">左浮動div</div> <div id="mydiv">段落</div>

CSS：

#left{ float:left; border:1px solid #333; width:100px; height:100px; } #mydiv{ border:1px solid #f66; margin-left:130px; }

#left是引起Bug的一個浮動div，同時設置了邊框便於觀察。

IE預覽結果：

Firefox預覽結果：

從理論上講，咱們尚未設置#mydiv的padding，它們理所固然是緊貼邊框的。但在IE中，「段落」文字並未牢牢貼住#left。在實際中可能會所以致使內部元素寬度超出外部div固定寬度而引起佈局問題。

解決問題：

是把#mydiv設置爲display:inline-block。

修改後CSS：

#left{ float:left; border:1px solid #333; width:100px; height:100px; } #mydiv{ border:1px solid #f66; margin-left:130px; +display:inline-block; }

用hack方法爲IE單獨設置display:inline-block後。

IE各版本預覽結果：

結果與Firefox一致。

11.高度不適應問題：高度不適應指的是，當內層對象的高度發生變化時，外層對象的高度不能自動擴展，特別是當內層對象使用padding或margin以後。高度不適應問題不是IE的專利，Firefox也出現這種問題。先來看看例子：

HTML：

<div id="box">  <p>p對象中的內容</p> </div>

CSS：

#box{ background-color:#eee; } #box p{ margin-top:20px; margin-bottom:20px; text-align:center; }

看看代碼作了什麼，除了背景以外，#box僅是一個沒有任何樣式的div，而p加了2個關鍵屬性margin-top:20px，margin-bottom:20px;，即上下外邊距都是20px，p對象的高度應當是20+20+文字高度，即應當在40px以上。理論上#box這個div的高度會被擠開，至少達到40px以上。咱們看看預覽效果。

瀏覽器預覽結果：

彷佛並不是預想的結果，看上去帶背景的#box仍是和文字同樣高，並無超過40px，這是爲何呢？爲了驗證一些事情，咱們在html先後加上一個帶背景的div。

修改後的HTML：

<div class="box2">up</div> <div id="box">  <p>p對象中的內容</p> </div> <div class="box2">down</div>

修改後的CSS：

#box{ background-color:#eee; } #box p{ margin-top:20px; margin-bottom:20px; text-align:center; } .box2{ background-color:#aaa; }

再來看下預覽結果：

瀏覽器預覽結果：

能夠看到上下兩個div並無緊貼#box對象，而是有必定的間距。測量下會發現，這個間距恰好是p對象的margin上下各20px。這個測驗證實了一個問題，就是#box對象並無因其中的p對象的margin變化而改變自身的高度。而p對象的margin高度的確在整個頁面中佔據了必定的空間。至關於#box不動，而p把本身撐到了#box外面去了。

不管是IE仍是Firefox，測試中都會發現這個問題。

解決問題：

通過一些測試，咱們發現對#box定義padding或者border，就會迫使#box從新計算本身的高度，從而使自身可以適應內容的高度變化。但若是強制給對象設置了邊距又會帶來位移。咱們須要找到一個新方法，再也不從對象自己的屬性入手，而是在對象的內部進行修復。咱們能夠在對象上下增長2個高度爲0的空div，並強制內容不顯示。

修改後的HTML：

<div class="box2">up</div> <div id="box">  <div style="height:0px;overflow:hidden"></div>  <p>p對象中的內容</p>  <div style="height:0px;overflow:hidden"></div> </div> <div class="box2">down</div>

這2個div只充當了佔位符的角色，而不發生實際的佔位。而對它的外層對象而言，因爲其中多了一些邏輯佔位對象使得它會從新計算高度，從而實現高度的自適應。

預覽效果：

12.IE6斷頭臺問題：斷頭臺問題是國外的CSS設計者給這個問題起的一個很是形象的名字，與之相反的，被切斷的不是對象的頭部，而是對象的底部。先來看下例子：

HTML：

<div id="layout">  <div id="left">  <p>W3School提供的內容僅用於培訓。咱們不保證內容的正確性。經過使用本站內容隨之而來的風險與本站無關。當使用本站時，表明您已接受了本站的使用條款和隱私條款。版權全部，保留一切權利。未經書面許可，不得轉載。W3School 簡體中文版的全部內容僅供測試，對任何法律問題及風險不承擔任何責任  </p>  </div>  <a href="#">連接1</a><br/>  <a href="#">連接2</a><br/>  <a href="#">連接3</a><br/>  <a href="#">連接4</a> </div>

XHTML代碼有三部分組成，一個是主對象#layout，主框架中有#left爲左浮動對象，右側爲普通的4個連接，相似於左右分欄的佈局。

CSS：

#layout{ border:5px solid #35BB0C; width:400px; background-color:#F2F2F2; } #left{ border:5px solid #D4CA25; width:200px; float:left; background-color:#fff; } a:hover{ background-color:#fff; }

在CSS代碼部分，主要設置了連接的背景色，#left的左浮動，以便於咱們觀察的粗邊框效果。先經過瀏覽器看看問題是如何發生的，見下圖：

IE6預覽效果：

這裏列出了IE6網頁效果的2個狀態，當網頁被打開時，頁面正常顯示，與CSS編碼指定樣式一致。當鼠標右側的「連接4」時，問題出現了，主對象#layout下面被切掉了，而剩下的高度正好是4個連接的高度。而當鼠標移到「連接1」或「連接2」時，#layout對象的高度又恢復正常。這即是IE6斷頭臺問題。

這個問題的主要緣由在於連接上，去除連接的a:hover{">值得注意的是，在#layout中，#left是個浮動對象，而右測是若干連接對象。對於未指定高度的對象而言，IE6會根據其中的內容（無論浮動與否）來計算高度的大小，而當例子中的連接對象是個非浮動對象，並具備hover改變border,background及padding屬性時，IE6會認爲這些屬性同時會改變#layout的高度，所以它從新計算對象高度。而使人失望的是，IE6的這種自覺得是的行爲並無達到預期目的，它會把非浮動對象的總高度做爲高度給了#layout，從而切斷了#left的內容。基於這類問題的產生緣由，解決方案能夠有多種。

解決問題：

根據問題產生的緣由，咱們能夠作出多套解決方案。咱們知道由於非浮動對象與浮動對象都在#layout中，因此咱們能夠從浮動方式入手，把非浮動對象改成浮動對象，這樣即可以解決問題。例如對XHTML修改以下：

<div id="layout">  <div id="left">  <p>W3School提供的內容僅用於培訓。咱們不保證內容的正確性。經過使用本站內容隨之而來的風險與本站無關。當使用本站時，表明您已接受了本站的使用條款和隱私條款。版權全部，保留一切權利。未經書面許可，不得轉載。W3School 簡體中文版的全部內容僅供測試，對任何法律問題及風險不承擔任何責任  </p>  </div>  <div id="right">  <a href="#">連接1</a><br/>  <a href="#">連接2</a><br/>  <a href="#">連接3</a><br/>  <a href="#">連接4</a>  </div> </div>

對連接加上個div，並設置浮動#right{float:left}。這樣使得兩個對象都成爲浮動對象，不會引起問題。

也能夠在#layout底部增長一個div來強制IE瀏覽器從新計算高度<div style="clear:both;"></div>，這個清除浮動內容的div會幫助瀏覽器從新找到合適的高度，從而解決斷頭臺問題。

13.容器不擴展問題：容器不擴展問題是咱們常常遇到的。好比咱們建立了一個div嵌套結構:

HTML：

<div id="divGroup">  <div id="a">子容器a</div>  <div id="b">子容器b</div> </div>

CSS：

#divGroup{ border:2px solid #333; } #a,#b{ border:2px solid #333; float:left; margin:5px; }

IE預覽結果：

Firefox預覽結果：

可見外層的高度並無隨着子容器的高度自動擴展，倒是造成了一條線。這是由於當子容器成爲浮動元素後，並脫離了文檔流。所以父容器認爲本身內容爲空，從而形成了這樣的結果。

解決問題：

解決方案是在容器的末尾加入個清理浮動的div。

修改後的HTML：

<div id="divGroup">  <div id="a">子容器a</div>  <div id="b">子容器b</div>  <div style="clear:both;"></div> </div>

若是還想防止這個元素佔據父元素的高度，能夠進一步優化成<div style="clear:both;display:block;font:0px/0px sans-serif;"> </div>，這樣這個清除浮動的容器被認爲是個不佔任何高度的空格字符。在網頁中的任何地方，當遇到容器不擴展時，只需加入此段便能修復問題。

14.IE8和FireFox父子元素上下margin疊加問題：

先看下效果：

<div class="gray"> <div class="blue"></div> <div class="black"></div> </div>

.gray{ background:gray; width:200px; margin:20px; } .blue{ background:blue; width:100px; height:100px; margin:20px; } .black{ background:black; width:100px; height:100px; margin:20px; }

上圖中，藍色div和黑色div是灰色div的子元素，三個div的margin都是20，可是咱們看到藍色div與其父元素的上邊界並無20px的間隙，黑色div與其父元素的下邊界也沒有20px的間隙，也就是說藍色div的上外邊距與其父元素的上外邊距疊加在了一塊兒，就好像是藍色div的上外邊距跑出去了同樣。黑色div也是同理。這就是父元素與子元素的邊距疊加效果，疊加後的取值取的是二者中較大的那個。經測試，只要父元素有border或padding，就不會觸發這個問題。然而刻意給父元素設置border或padding又會帶來位移。可採用以下方法來根本解決問題：

解決問題：給父元素設置overflow:hidden;便可解決。

再來預覽下：

IE8：

解決了。

FireFox：

也解決了。

15.IE6高度不固定問題：

典型BUG1：IE6下，即便給父元素設了固定高度，子元素仍是會將其撐開。

典型BUG2：若是一個元素沒有子元素，而這個元素設置的length又小於div默認高度，則這個元素在IE6裏顯示的高度仍然是div的默認高度。

引起以上2個BUG的緣由在於length屬性在IE6裏被看成min-length（最小高度）解析了，（換句話說，你壓根在IE6中就沒設置過固定高度，由於你設置的是最小高度）

解決辦法是再給父元素設置overflow:hidden;

16.IE6設置了最小高度並撐滿父元素高度：

默認狀況下若是對IE6設置了最小高度200px，那麼若是實際內容有250px，則只會顯示250px的高度。也就是高度會跟隨着內容顯示。若是此時但願不管裏面內容有多少，都讓其填充滿父元素高度，則要這麼設置：

height:auto!important; height:200px; min-height:200px;

17.IE六、IE7下浮動元素未脫離文檔流假象的問題：

對元素設置浮動後，在IE6&IE7下預覽，會產生元素未脫離文檔流的假象的現象。其實元素脫離文檔流了，這問題實際上是其後的元素引發的。因爲其後的元素因某些緣由形成hasLayout被觸發而致使的它未去佔據浮動元素的空間（這問題提及來話長，你就這麼理解好了：這個大概追朔到表格佈局的年代，因爲單元格都是有hasLayout的，然後面單元格里的元素確定不會跑前面的單元格里去的）。關於hasLayout，在第5條裏有詳細說明，這裏單獨提出來做爲一條來講明，僅由於這個浮動未脫離文檔流假象的問題比較典型。

18.全屏遮罩後居中顯示一個對話層：

下面是遮罩層：絕對定位，寬高都100%，而且半透明

.over{ position:absolute; width:100%; height:100%; top:0px; left:0px; background-color:#7E9898; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity:0.5; opacity:0.5; }

下面是對話層：也是絕對定位：

.confirm{ position:absolute; width:400px; height:300px; background:#FFFFFF; top:300px; left:0px; }

這裏的提示層不要嵌套在遮罩層裏面，不然也會受影響，變成半透明的了。要讓提示層跟遮罩層並列。

這裏還有2個問題：

1.單單對遮罩層使用height:100%，只有IE6會達到效果，而其餘瀏覽器一旦只會是當前可見區域遮上了，若是拖動縱向滾動條，發現下方還有沒遮蓋上。

2.用戶電腦分辨率不一樣，而絕對定位的提示層使用margin:300px auto也無效。

爲了達到各瀏覽器網頁可見區域所有遮蓋的效果，這裏用了下jquery腳本，解決以上2個問題：

$(document).ready(function(){ $("div[class='cover']").height($(document).height());//將可見區域都遮罩起來 $("div[class='confirm']").css("left",($(document).width()-($("div[class='confirm']").width()))/2+"px");//提示層居中 });

最佳實踐：

1.寫DTD聲明：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2.引入base.css重置各瀏覽器默認屬性值：

html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0px;padding:0px;} table{border-collapse:collapse;border-spacing:0px;} fieldset,img,abbr,acronym{border:0px;} address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;} ol,ul{list-style:none;} caption,th{text-align:left;} h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} q:before,q:after{content:'';}