html+css中常見的瀏覽器兼容性處理

時間 2019-11-17

標籤 html+css html css 常見的瀏覽器兼容性處理欄目 CSS 简体版

原文原文鏈接

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