前端HTML兼容性問題收集（1）

1. 使用XHTML格式寫代碼，並定義好DOCTYPE，因為這個會影響CSS的處理

2. div 的垂直居中問題

vertical-align:middle;將行距增加到和整個DIV一樣高(line-height:100px;)，然後插入文字，就能垂直居中了。

缺點：需要控制內容不換行

3. margin 加倍問題

設置為float的div在IE下設置的margin會加倍，這是IE6的BUG。

解決：在此DIV上加入：display：inline;

4. 浮動IE產生雙倍距離

#box{float:left;width:100px;margin:0 0 0 100px;}

此情況下IE會產生200px的距離 display:inline;-->使浮動忽略

Tips:

block與inline的區別：

block:總是在新行上開始、高度、寬度、行高、邊距都可以控制(塊元素)

inline:和其它元素在同一行上，不可控制(內嵌元素)

#box{display:block;} --> 可以為內嵌元素模擬為塊元素

#box{display:inline;} --> 實現同一行排列的效果

#box{display:table;} -->

5. IE 寬度與高度的問題

IE不認min-*這個定義，但實際上它把正常的width和height當作有min的情況來處理。

如果只用寬度和高度，正常的瀏覽器這兩個值都不會變

如果只用min-width和min-height，則IE下面就沒有設置寬度和高度

解決：

#box{width:80px;height:35px;}

改為:

#box{width:auto;height:auto;min-width:80px;min-height:35px;}

6. 頁面的最小寬度

min-width指定最小寬度，可以保證排版正確性。但IE不認識，解決如下：

把div放到body下，並給指定如下的樣式：

#container{min-width:600px;width:expression(document.body.clientWidth < 600 ? '600px' : 'auto');}

Tips: 第二個width使用了js來判斷，不太規範

7. DIV浮動IE文本產生3像素的BUG

左邊對象浮動，右邊採用外補丁的左邊距來定位，右邊對象內的文本會離左邊有3px的間距

#box{float:left;width:800px;}

#left{float:left;width:50%;}

#right{width:50%;}

*html #left{margin-right:3px;} // 關鍵