新聞中心
IE每個(gè)新版本的推出,就不可避免地在IE的各個(gè)主要版本之間產(chǎn)生兼容問題,盡管IE8推出已有時(shí)日,使用IE6的用戶仍然相當(dāng)可觀。本文以速查手冊(cè)的形式介紹CSS(2.1和3)在IE6,IE7,IE8三個(gè)版本之間的兼容情況。

IE6,IE7,IE8 CSS兼容速查表
現(xiàn)代Web設(shè)計(jì)與開發(fā)越來越看重瀏覽器兼容問題,IE每個(gè)新版本的推出,都在CSS的標(biāo)準(zhǔn)化方面前進(jìn)一大步,同時(shí),也就不可避免地在IE的各個(gè)主要版本之間產(chǎn)生兼容問題,盡管IE8推出已有時(shí)日,使用IE6的用戶仍然相當(dāng)可觀。本文以速查手冊(cè)的形式介紹CSS(2.1和3)在IE6,IE7,IE8三個(gè)版本之間的兼容情況。
1.居中問題
div里的內(nèi)容,IE默認(rèn)為居中,而Firefox默認(rèn)為左對(duì)齊
可以嘗試增加代碼margin:auto
2.高度問題
兩上下排列或嵌套的div,上面的div設(shè)置高度(height),如果div里的實(shí)際內(nèi)容大于所設(shè)高度,在Firefox中會(huì)出現(xiàn)兩個(gè)div重疊的現(xiàn)象;但在IE中,下面的div會(huì)自動(dòng)給上面的div讓出空間
所以為避免出現(xiàn)層的重疊,高度一定要控制恰當(dāng),或者干脆不寫高度,讓他自動(dòng)調(diào)節(jié),比較好的方法是height:100%;
但當(dāng)這個(gè)div里面一級(jí)的元素都float了的時(shí)候,則需要在div塊的***,閉和前加一個(gè)沉底的空div,對(duì)應(yīng)CSS是:
.float_bottom{clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}
3.clear:both
不想受到float浮動(dòng)的,就在div中寫入clear:both;
4.IE浮動(dòng)margin產(chǎn)生的雙倍距離
- #box{
- float:left;
- width:100px;
- margin:000100px;//這種情況之下IE會(huì)產(chǎn)生200px的距離
- display:inline;//使浮動(dòng)忽略
- }
5.padding問題
Firefox設(shè)置padding后,div會(huì)增加height和width,但I(xiàn)E不會(huì)(*標(biāo)準(zhǔn)的XHTML1.0定義dtd好像一致了)
高度控制恰當(dāng),或嘗試使用height:100%;
寬度減少使用padding
但根據(jù)實(shí)際經(jīng)驗(yàn),一般Firefox和IE的padding不會(huì)有太大區(qū)別,div的實(shí)際寬=width+padding,所以div寫全width和padding,width用實(shí)際想要的寬減去padding定義
6.div嵌套時(shí)y軸上padding和marign的問題
Firefox里y軸上子div到父div的距離為父padding+子marign
IE里y軸上子div到父div的距離為父padding和子marign里大的一個(gè)
Firefox里y軸上父padding=0且border=0時(shí),子div到父div的距離為0,子marign作用到父div外面
7.padding,marign,height,width的傻瓜式解決技巧
注意是技巧,不是方法:
寫好標(biāo)準(zhǔn)頭
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
高盡量用padding,慎用margin,height盡量補(bǔ)上100%,父級(jí)height有定值子級(jí)height不用100%,子級(jí)全為浮動(dòng)時(shí)底部補(bǔ)個(gè)空clear:both的div
寬盡量用margin,慎用padding,width算準(zhǔn)實(shí)際要的減去padding。#p#
列表類
1.ul標(biāo)簽在Firefox中默認(rèn)是有padding值的,而在IE中只有margin有值
先定義ul{margin:0;padding:0;}
2.ul和ol列表縮進(jìn)問題
消除ul、ol等列表的縮進(jìn)時(shí),樣式應(yīng)寫成:{list-style:none;margin:0px;padding:0px;}
顯示類
1.display:block,inline兩個(gè)元素
- display:block;//可以為內(nèi)嵌元素模擬為塊元素
- display:inline;//實(shí)現(xiàn)同一行排列的的效果
- display:table;//forFirefox,模擬table的效果
◆display:block塊元素,元素的特點(diǎn)是:
總是在新行上開始;
高度,行高以及頂和底邊距都可控制;
寬度缺省是它的容器的100%,除非設(shè)定一個(gè)寬度
,


咨詢
建站咨詢
