1.居中問題html
div裏的內容,IE默認爲居中,而FF默認爲左對齊,能夠嘗試增長代碼margin: 0 auto;
2.高度問題瀏覽器
兩上下排列或嵌套的div,上面的div設置高度(height),若是div裏的實際內容大於所設高度,在FF中會出現兩個div重疊的現象;但在IE中,下面的div會自動給上面的div讓出空間因此爲避免出現層的重疊,高度必定要控制恰當,或者乾脆不寫高度,讓他自動調節,比較好的方法是 height:100%;但當這個div裏面一級的元素都float了的時候,則須要在div塊的最後,閉和前加一個沉底的空div,對應CSS是:.float_bottom {clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}
3.clear:both;xml
不想受到float浮動的,就在div中寫入clear:both;
4.IE浮動 margin產生的雙倍距離htm
#box {
float:left;
width:100px;
margin:0 0 0 100px; //這種狀況之下IE會產生200px的距離
display:inline; //使浮動忽略
}
5.padding問題it
FF設置 padding 後,div會增長 height 和 width,但IE不會 (* 標準的 XHTML1.0 定義 dtd 好像一致了)高度控制恰當,或嘗試使用 height:100%;寬度減小使用 padding但根據實際經驗,通常FF和IE的 padding 不會有太大區別,div 的實際寬 = width + padding ,因此div寫全 width 和 padding,width 用實際想要的寬減去 padding 定義。io
6.div嵌套時 y軸上 padding和 marign的問題技巧
FF裏 y 軸上 子div 到 父div 的距離爲 父padding + 子marign
IE裏 y 軸上 子div 到 父div 的距離爲 父padding 和 子marign 裏大的一個
FF裏 y 軸上 父padding=0 且 border=0 時,子div 到 父div 的距離爲0,子marign 做用到 父div 外面transition
7.padding,marign,height,width的傻瓜式解決技巧float
注意是技巧,不是方法:
寫好標準頭
<!DOCTYPE html PUBLIC 「-//W3C//DTD XHTML 1.0 Transitional//EN」 「http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd」>
<html xmlns=」http://www.w3.org/1999/xhtml」>
高儘可能用padding,慎用margin,height儘可能補上100%,父級height有定值子級height不用100%,子級全爲浮動時底部補個空clear:both的div寬儘可能用margin,慎用padding,width算準實際要的減去padding方法
8.列表類
1. ul標籤在FF中默認是有 padding值的,而在IE中只有margin有值
先定義 ul {margin:0;padding:0;}
2. ul和ol列表縮進問題消除ul、ol等列表的縮進時,樣式應寫成: {list-style:none;margin:0px;padding:0px;}
查看瀏覽器兼容系代碼處理大全:http://user.qzone.qq.com/1047832475/2