html和css中常見的瀏覽器相容性問題-css教學-PHP中文網

在html開發中我們一定會用到css，但是有時候開發中，並不是我們所想的那麼順利，比如說html和css中常見的瀏覽器兼容性問題，那麼針對這個瀏覽器兼容性問題我們這節內容就來教大家如何去解決。

1、居中問題

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;

不想受到float浮動的，就在div中寫入clear:both;

4、IE浮動margin產生的雙倍距離

01#box {
 float:left;
width:100px;
 margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
display:inline; //使浮动忽略
}

登入後複製

5、padding問題

FF設定padding 後，div會增加height 和width，但IE不會（* 標準的XHTML1.0 定義dtd 好像一致了）高度控制恰當，或嘗試使用height:100%;寬度減少使用padding但根據實際經驗，一般FF和IE的padding 不會有太大區別，div 的實際寬= width + padding ，所以div寫全width 和padding，width用實際想要的寬度減去padding 定義。

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 外面

7、padding，marign，height，width的傻瓜式解決技巧

#注意是技巧，不是方法：

寫好標準頭

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=” 
高尽量用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;}

9、顯示類別（display:block,inline）

# 1. display:block,inline兩個元素

display:block; //可以模擬內嵌元素為區塊元素

display:inline; //實現同一行排列的效果

display:table; //for FF,類比table的效果

display:block 區塊元素，元素的特徵是：

總是在新行上開始；高度，行高以及頂和底邊距都可控制；寬度缺省是它的容器的100%，除非設定一個寬度