CSS瀏覽器兼容性與解析問題終極歸納

1、 HYPERLINK blo/zhutianxiang/archive/2012/01/19/2320349.html CSS瀏覽器兼容性與解析問題終極歸納 1.怪異模式問題：漏寫DTD聲明，F(xiàn)irefox仍然會按照標準模式來解析網(wǎng)頁，但在IE中會觸發(fā)怪異模式。為避免怪異模式給我們帶來不必要的麻煩，最好養(yǎng)成書寫DTD聲明的好習(xí)慣。2.IE6雙邊距問題：在IE6下，如果對元素設(shè)置了浮動，同時又設(shè)置了margin-left或margin-right，margin值會加倍。例如：HTML：CSS：.myDiv width:100px; height:100px; border:1px solid #

2、000; float:left; margin-left:30px;Firefox預(yù)覽結(jié)果：IE6預(yù)覽結(jié)果：很明顯的，在IE6中，margin-left:30px的邊距翻倍成60px了。解決問題：設(shè)置display:inline：.myDiv width:100px; height:100px; border:1px solid #000; float:left; display:inline; margin-left:30px;IE6預(yù)覽結(jié)果：3.上下margin重合：margin是個有點特殊的樣式，相鄰的margin-left和margin-right是不會重合的，但相鄰的margin-t

3、op和margin-bottom會產(chǎn)生重合。不管IE還是Firefox都存在這問題。例如：HTML：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設(shè)置了25px的下邊距，對下方的div設(shè)置了50px的上邊距。為了便于觀察，這里將div的高度都設(shè)為100px。瀏覽器預(yù)覽結(jié)果：可見，結(jié)果不是預(yù)期的上下div拉開75

4、px的距離，而是拉開了半個div高度(50px)的距離。解決問題：統(tǒng)一使用margin-top或者margin-bottom，不要混合使用。這并不是技術(shù)上的必需，但卻是個良好的習(xí)慣。4.超鏈接訪問后hover樣式不出現(xiàn)：有時 候我們同時設(shè)置了a:visited和a:hover樣式，但一旦超鏈接訪問后，hover的樣式就不再出現(xiàn)，這是怎么回事呢？是因為將樣式順序放錯了， 調(diào)整為先a:visited再a:hover。關(guān)于a標簽的四種狀態(tài)的排序問題，有個簡單好記的原則，叫做love hate原則，即i(link)ov(visited)e h(hover)a(active)e。5.IE6、IE7的ha

5、sLayout問題：很多時候，CSS在IE下的解析十分奇怪，明明在Firefox中顯示得非常正確，但到了IE下卻出現(xiàn)了問題，有的時候，這些問題甚至表現(xiàn)得非常詭異。例如一個比較經(jīng)典的Bug就是設(shè)置border的時候，有時候border會斷開，刷新頁面或者拖下滾動條的時候，斷掉的部分又會連接起來。再比如在IE6&IE7中對元素設(shè)置浮動后，其后的元素并未占據(jù)這部分空 間，造成了IE6&IE7中浮動元素未脫離文檔流的假象。也就是說，實際上IE6&IE7浮動元素也脫離了文檔流，只是由于其后元素的 hasLayout被自動觸發(fā)而導(dǎo)致的。這里說的hasLayout被觸發(fā)，即指元素的hasLayout屬性為t

6、rue。下列元素默認hasLayout=true：, , , , , , , , , , , , 下列 CSS 屬性和取值將會自動讓一個元素的hasLayout=true：position: absolute絕對定位元素的包含區(qū)塊(containing block)就會經(jīng)常在這一方面出問題。float: left|right由于 layout 元素的特性，浮動模型會有很多怪異的表現(xiàn)。display: inline-block當一個內(nèi)聯(lián)級別的元素需要 layout 的時候往往就要用到它，這也可能也是這個 CSS 屬性的唯一效果讓某個元素擁有 layout。inline-block行為在IE中是可

7、以實現(xiàn)的，但是需要注意的是： HYPERLINK http:/www.bruni/test/InlineBlockLayout.html o linkMark t _blank IE/Win: inline-block and hasLayout 。width: 除 “auto 外的任意值很多人遇到 layout 相關(guān)問題發(fā)生時，一般都會先嘗試用這個來修復(fù)。height: 除 “auto 外的任意值height: 1% 就在 Holly Hack 中用到。zoom: 除 “normal 外的任意值IE專有屬性。不過 zoom: 1 可以臨時用做調(diào)試。writing-mode: tb-rlMS專

8、有屬性。overflow: hidden|scroll|auto在 IE7 中，overflow 也變成了一個 layout 觸發(fā)器，這個屬性在之前版本 IE 中沒有觸發(fā) layout 的功能。overflow-x|-y: hidden|scroll|autooverflow-x 和 overflow-y 是 CSS3 盒模型中的屬性，尚未得到瀏覽器的廣泛支持。他們在之前版本IE中沒有觸發(fā) layout 的功能。另外 IE7 的熒幕上又新添了幾個 haslayout 的演員，如果只從 hasLayout 這個方面考慮，min/max 和 width/height 的表現(xiàn)類似，position

9、的 fixed 和 absolute 也是一模一樣。position: fixedmin-width: 任意值就算設(shè)為0也可以讓該元素獲得 layout。max-width: 除 “none 之外的任意值min-height: 任意值。即使設(shè)為0也可以讓該元素的 haslayout=truemax-height: 除 “none 之外的任意值如果BUG是由于hasLayout未觸發(fā)所引起的，則可采用手動觸發(fā)hasLayout來解決：辦法是使用一個生僻的CSS屬性zoom來觸發(fā)，引用樣式.zoomzoom:1。如果BUG是hasLayout被自動觸發(fā)而引起的，則要看觸發(fā)是什么引起的，若 這元素本

10、身就會自動觸發(fā)hasLayout，可以考慮換一個元素。若是對于這元素設(shè)置的某個CSS屬性引起的，則可以考慮刪除這屬性，倘若這屬性又是必要 的，則就需要自己根據(jù)具體情況去編寫CSS Hack，因為hasLayout是只讀的，一旦hasLayout=true后，便不可逆轉(zhuǎn)。6.行內(nèi)元素上下margin及padding不拉開元素間距的問題：行 內(nèi)元素的margin和padding屬性很奇怪，水平方向的padding-left、padding-right、margin-left、 margin-right都產(chǎn)生邊距效果，但豎直方向的padding-top、padding-bottom、margin-t

11、op、margin- bottom卻不會產(chǎn)生邊距效果。例如：HTML：塊級元素行內(nèi)元素CSS:divbackground:gray;padding:20px;spanbackground:green;padding:20px;margin:20px;各瀏覽器預(yù)覽結(jié)果：可見豎直方向的padding、margin雖然增大了行內(nèi)元素的面積，但并沒有和相鄰元素拉開距離，導(dǎo)致了元素重疊。解決問題：將行內(nèi)元素display設(shè)置為block即可解決修改后CSS：spanbackground:green;padding:20px;margin:20px;display:block;各瀏覽器預(yù)覽結(jié)果：但由于塊級

12、元素與行內(nèi)元素的默認樣式不同，可能會因此書寫額外的樣式代碼。比如width樣式，因為塊級元素默認占據(jù)整行。7.IE6下select元素顯示問題：瀏覽 器解析頁面時，會先判斷元素的類型，如果是窗口類型的，會優(yōu)先于非窗口類型的元素，顯示在頁面最頂端，如果同屬于非窗口類型的，才會去判斷z-index 的大小。select元素在IE6下是以窗口形式顯示的，這是IE6的一個Bug。導(dǎo)致的情況是往往想要彈出一個層，結(jié)果select元素出現(xiàn)在層上方。 例如：HTML：=請選擇=CSS：div position:absolute; background:#CCDCEE; top:0px; left:0px;

13、width:300px; height:300px; border:1px solid #000; margin:5px;IE6預(yù)覽結(jié)果：解決問題：我們可以用一個和彈出層同樣大小的iframe放在層下面，select上面，用iframe遮住select。比如設(shè)置彈出層的樣式z-index:2，iframe的樣式z-index:1，使iframe位于層下方。修改后HTML：=請選擇=修改后CSS：div position:absolute; background:#CCDCEE; top:0px; left:0px; width:300px; height:300px; border:1px s

14、olid #000; margin:5px; z-index:2;iframe position:absolute; top:0px; left:0px; width:300px; height:300px; margin:5px; z-index:1;我們讓iframe位于div下方，大小以及與瀏覽器的距離調(diào)整成與div一致。IE6預(yù)覽結(jié)果：8.IE6對png的透明度支持問題：png 格式因為其優(yōu)秀的壓縮算法和對透明度的完美支持，成為Web中最流行的圖片格式之一。但它存在一個眾所周知的頭疼問題-IE6下對png的透明度支持 并不好。本該是透明的地方，在IE6下會顯示為淺藍色。可以使用IE下私

15、有的濾鏡功能來解決問題，格式如 下：filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=png圖片路徑 ,sizingMethod=crop)。9.ul的不同表現(xiàn)：ul列表也是在IE與Firefox中容易發(fā)生問題的對象，主要源自瀏覽器對ul對象的默認值設(shè)置。在IE與Firefox中，一部分對象有默認的屬性（比如h1h6），他們本身就帶有大字號、加粗樣式以及一些邊距效果。ul也是如此，默認情況下ul是有邊距的。例如：HTML： 菜單一 菜單二 菜單三 CSS：#layoutborder:1px solid #333;ulli

16、st-style:none;代碼非常簡單，僅去除了ul的列表圓點?？聪略贗E和Firefox的預(yù)覽效果：IE預(yù)覽結(jié)果：Firefox預(yù)覽結(jié)果：顯示都很正常，關(guān)鍵在于我們對ul接下來的設(shè)置：修改后的CSS：#layoutborder:1px solid #333;ul list-style:none; margin-left:0px;設(shè)置ul左外邊距為0后。IE預(yù)覽結(jié)果：Firefox預(yù)覽結(jié)果：預(yù)覽后發(fā)現(xiàn)問題出現(xiàn)了。IE中的ul已與div靠齊，而Firefox中的ul卻絲毫不動。這是為什么？不妨把樣式修改下再看看。修改后的CSS：#layoutborder:1px solid #333;ul l

17、ist-style:none; padding-left:0px;這次我們把margin-left換成padding-left。再來看看預(yù)覽結(jié)果。IE預(yù)覽結(jié)果：Firefox預(yù)覽結(jié)果：可見效果正好相反，F(xiàn)irefox中實現(xiàn)了靠齊，而IE中絲毫未動。通過以上例子我們發(fā)現(xiàn)：在IE中，ul的默認邊距是margin，在Firefox中，ul的默認邊距是padding。我們單獨定義margin或padding時，自然不能在兩個瀏覽器達到一致效果。這就是ul在不同瀏覽器下表現(xiàn)不同的問題所在。解決問題：可以用hack方法分別針對IE和Firefox單獨寫樣式，但更好的做法是樣式開頭先統(tǒng)一ul邊距，ulpad

18、ding:0px;margin:0px;。10.IE3px問題：3px問題不是經(jīng)常被人發(fā)現(xiàn)，因為它的影響只產(chǎn)生3px的位移。如果是精確到像素級的設(shè)計，3px的影響可謂不小。先來看下例子：HTML：左浮動div段落CSS：#left float:left; border:1px solid #333; width:100px; height:100px;#mydiv border:1px solid #f66; margin-left:130px;#left是引發(fā)Bug的一個浮動div，同時設(shè)置了邊框便于觀察。IE預(yù)覽結(jié)果：Firefox預(yù)覽結(jié)果：從理論上講，我們還沒有設(shè)置#mydiv的padd

19、ing，它們理所當然是緊貼邊框的。但在IE中，“段落”文字并未緊緊貼住#left。在實際中可能會因此導(dǎo)致內(nèi)部元素寬度超出外部div固定寬度而引發(fā)布局問題。解決問題：是把#mydiv設(shè)置為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單獨設(shè)置display:inline-block后。IE各版本

20、預(yù)覽結(jié)果：結(jié)果與Firefox一致。11.高度不適應(yīng)問題：高度不適應(yīng)指的是，當內(nèi)層對象的高度發(fā)生變化時，外層對象的高度不能自動擴展，特別是當內(nèi)層對象使用padding或margin之后。高度不適應(yīng)問題不是IE的專利，F(xiàn)irefox也出現(xiàn)這種問題。先來看看例子：HTML： p對象中的內(nèi)容CSS：#box background-color:#eee;#box p margin-top:20px; margin-bottom:20px; text-align:center;看看代碼做了什么，除了背景之外，#box僅是一個沒有任何樣式的div，而p加 了2個關(guān)鍵屬性margin-top:20px，ma

21、rgin-bottom:20px;，即上下外邊距都是20px，p對象的高度應(yīng)當是20+20+文 字高度，即應(yīng)當在40px以上。理論上#box這個div的高度會被擠開，至少達到40px以上。我們看看預(yù)覽效果。瀏覽器預(yù)覽結(jié)果：似乎并非預(yù)想的結(jié)果，看上去帶背景的#box還是和文字一樣高，并沒有超過40px，這是為什么呢？為了驗證一些事情，我們在html前后加上一個帶背景的div。修改后的HTML：up p對象中的內(nèi)容down修改后的CSS：#box background-color:#eee;#box p margin-top:20px; margin-bottom:20px; text-align

22、:center;.box2 background-color:#aaa;再來看下預(yù)覽結(jié)果：瀏覽器預(yù)覽結(jié)果：可以看到上下兩個div并沒有緊貼#box對象，而是有一定的間距。測量下會發(fā) 現(xiàn)，這個間距剛好是p對象的margin上下各20px。這個測驗證明了一個問題，就是#box對象并沒有因其中的p對象的margin變化而改變自身的 高度。而p對象的margin高度的確在整個頁面中占據(jù)了一定的空間。相當于#box不動，而p把自己撐到了#box外面去了。無論是IE還是Firefox，測試中都會發(fā)現(xiàn)這個問題。解決問題：經(jīng)過一些測試，我們發(fā)現(xiàn)對#box定義padding或者border，就會迫 使#box重

23、新計算自己的高度，從而使自身能夠適應(yīng)內(nèi)容的高度變化。但如果強制給對象設(shè)置了邊距又會帶來位移。我們需要找到一個新方法，不再從對象本身的 屬性入手，而是在對象的內(nèi)部進行修復(fù)。我們可以在對象上下增加2個高度為0的空div，并強制內(nèi)容不顯示。修改后的HTML：up p對象中的內(nèi)容 down這2個div只充當了占位符的角色，而不發(fā)生實際的占位。而對它的外層對象而言，由于其中多了一些邏輯占位對象使得它會重新計算高度，從而實現(xiàn)高度的自適應(yīng)。預(yù)覽效果：12.IE6斷頭臺問題：斷頭臺問題是國外的CSS設(shè)計者給這個問題起的一個非常形象的名字，與之相反的，被切斷的不是對象的頭部，而是對象的底部。先來看下例子：HTM

24、L： W3School提供的內(nèi)容僅用于培訓(xùn)。我們不保證內(nèi)容的正確性。通過使用本站內(nèi)容隨之而來的風(fēng)險與本站無關(guān)。當使用本站時，代表您已接受了本站的使用條款和隱私條款。版權(quán)所有，保留一切權(quán)利。未經(jīng)書面許可，不得轉(zhuǎn)載。W3School 簡體中文版的所有內(nèi)容僅供測試，對任何法律問題及風(fēng)險不承擔任何責(zé)任 鏈接1 鏈接2 鏈接3 鏈接4XHTML代碼有三部分組成，一個是主對象#layout，主框架中有#left為左浮動對象，右側(cè)為普通的4個鏈接，類似于左右分欄的布局。CSS：#layout border:5px solid #35BB0C; width:400px; background-color:#F

25、2F2F2;#left border:5px solid #D4CA25; width:200px; float:left; background-color:#fff;a:hover background-color:#fff;在CSS代碼部分，主要設(shè)置了鏈接的背景色，#left的左浮動，以便于我們觀察的粗邊框效果。先通過瀏覽器看看問題是如何發(fā)生的，見下圖：IE6預(yù)覽效果：這里列出了IE6網(wǎng)頁效果的2個狀態(tài)，當網(wǎng)頁被打開時，頁面正常顯示，與CSS編 碼指定樣式一致。當鼠標右側(cè)的“鏈接4”時，問題出現(xiàn)了，主對象#layout下面被切掉了，而剩下的高度正好是4個鏈接的高度。而當鼠標移到“鏈接1”

26、 或“鏈接2”時，#layout對象的高度又恢復(fù)正常。這便是IE6斷頭臺問題。這個問題的主要原因在于鏈接上，去除鏈接的 a:hoverbackground-color:#fff樣式后，一切正常。經(jīng)測試發(fā)現(xiàn)，不僅僅是background-color的變化，如果改 變hover狀態(tài)下鏈接的其他屬性，也會引發(fā)同樣的問題。例如設(shè)置padding、border、加粗、斜體等，都會引發(fā)斷頭臺問題。值得注意的是，在#layout中，#left是個浮動對象，而右測是若干鏈接對 象。對于未指定高度的對象而言，IE6會根據(jù)其中的內(nèi)容（不管浮動與否）來計算高度的大小，而當例子中的鏈接對象是個非浮動對象，并具有hov

27、er改變 border,background及padding屬性時，IE6會認為這些屬性同時會改變#layout的高度，因此它重新計算對象高度。而令人失望 的是，IE6的這種自以為是的行為并沒有達到預(yù)期目的，它會把非浮動對象的總高度作為高度給了#layout，從而切斷了#left的內(nèi)容。基于這類問題 的產(chǎn)生原因，解決方案可以有多種。解決問題：根據(jù)問題產(chǎn)生的原因，我們可以做出多套解決方案。我們知道因為非浮動對象與浮動對象都在#layout中，所以我們可以從浮動方式入手，把非浮動對象改為浮動對象，這樣便可以解決問題。例如對XHTML修改如下： W3School提供的內(nèi)容僅用于培訓(xùn)。我們不保證內(nèi)容的

28、正確性。通過使用本站內(nèi)容隨之而來的風(fēng)險與本站無關(guān)。當使用本站時，代表您已接受了本站的使用條款和隱私條款。版權(quán)所有，保留一切權(quán)利。未經(jīng)書面許可，不得轉(zhuǎn)載。W3School 簡體中文版的所有內(nèi)容僅供測試，對任何法律問題及風(fēng)險不承擔任何責(zé)任 鏈接1 鏈接2 鏈接3 鏈接4 對鏈接加上個div，并設(shè)置浮動#rightfloat:left。這樣使得兩個對象都成為浮動對象，不會引發(fā)問題。也可以在#layout底部增加一個div來強制IE瀏覽器重新計算高度，這個清除浮動內(nèi)容的div會幫助瀏覽器重新找到合適的高度，從而解決斷頭臺問題。13.容器不擴展問題：容器不擴展問題是我們經(jīng)常遇到的。比如我們創(chuàng)建了一個di

29、v嵌套結(jié)構(gòu):HTML： 子容器a 子容器bCSS：#divGroup border:2px solid #333;#a,#b border:2px solid #333; float:left; margin:5px;IE預(yù)覽結(jié)果：Firefox預(yù)覽結(jié)果：可見外層的高度并沒有隨著子容器的高度自動擴展，卻是形成了一條線。這是因為當子容器成為浮動元素后，并脫離了文檔流。因此父容器認為自己內(nèi)容為空，從而造成了這樣的結(jié)果。解決問題：解決方案是在容器的末尾加入個清理浮動的div。修改后的HTML： 子容器a 子容器b 如果還想防止這個元素占據(jù)父元素的高度，可以進一步優(yōu)化成，這樣這個清除浮動的容器被認為是

30、個不占任何高度的空格字符。在網(wǎng)頁中的 任何地方，當遇到容器不擴展時，只需加入此段便能修復(fù)問題。14.IE8和FireFox父子元素上下margin疊加問題：先看下效果： .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 都是

31、20，但是我們看到藍色div與其父元素的上邊界并沒有20px的間隙，黑色div與其父元素的下邊界也沒有20px的間隙，也就是說藍色div的上 外邊距與其父元素的上外邊距疊加在了一起，就好像是藍色div的上外邊距跑出去了一樣。黑色div也是同理。這就是父元素與子元素的邊距疊加效果，疊加后 的取值取的是兩者中較大的那個。經(jīng)測試，只要父元素有border或padding，就不會觸發(fā)這個問題。然而刻意給父元素設(shè)置border或 padding又會帶來位移?？刹捎萌缦路椒▉砀窘鉀Q問題：解決問題：給父元素設(shè)置overflow:hidden;即可解決。再來預(yù)覽下：IE8：解決了。FireFox：也解決了。

32、15.IE6高度不固定問題：典型BUG1：IE6下，即使給父元素設(shè)了固定高度，子元素還是會將其撐開。典型BUG2：如果一個元素沒有子元素，而這個元素設(shè)置的length又小于div默認高度，則這個元素在IE6里顯示的高度仍然是div的默認高度。引發(fā)以上2個BUG的原因在于length屬性在IE6里被當作min-length（最小高度）解析了，（換句話說，你壓根在IE6中就沒設(shè)置過固定高度，因為你設(shè)置的是最小高度）解決辦法是再給父元素設(shè)置overflow:hidden;16.IE6設(shè)置了最小高度并撐滿父元素高度：默認情況下如果對IE6設(shè)置了最小高度200px，那么如果實際內(nèi)容有250px，則只會顯

33、示250px的高度。也就是高度會跟隨著內(nèi)容顯示。如果此時希望無論里面內(nèi)容有多少，都讓其填充滿父元素高度，則要這么設(shè)置：height:auto!important; height:200px; min-height:200px;17.IE6、IE7下浮動元素未脫離文檔流假象的問題：對元素設(shè)置浮動后，在IE6&IE7下預(yù)覽，會產(chǎn)生元素未脫離文檔流的假 象的現(xiàn)象。其實元素脫離文檔流了，這問題其實是其后的元素引起的。由于其后的元素因某些原因造成hasLayout被觸發(fā)而導(dǎo)致的它未去占據(jù)浮動元素的空 間（這問題說起來話長，你就這么理解好了：這個大概追朔到表格布局的年代，由于單元格都是有hasLayout

34、的，而后面單元格里的元素肯定不會跑前面的 單元格里去的）。關(guān)于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會達到效果，而其他瀏覽器一旦只會