瀏覽器相容性ie6
阿新 • • 發佈：2018-12-04
頭文件與怪異盒模型
在老版本IE下，不設定文件宣告，頁面就會陷入怪異盒模型解析
標準盒模型:
width/height = content;
可視寬/高 = content + padding + border;
怪異盒模型
width/height = 可視寬/高;
content = width - padding - border;
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #box { width: 200px; height: 200px; padding: 50px; border: 20px solid #000; /* chrome 260 * 260 */ /* ie6 200 * 200 */ } #div { height: 100px; background: red; /* chrome 200 * 100 */ /* ie6 140 * 100 */ } </style> </head> <body> <div id="box"> <div id="div"></div> </div> </body> </html>
在IE6下，塊屬性元素的高度小於19px的時候，高度會按照19px來處理.
解決辦法：overflow:hidden;
在chrome下，文字大小小於12px的時候，會被當做12px來處理
解決辦法: 用圖片代替;
在IE6下，1px的點線會顯示成虛線
解決辦法: 用圖片代替;
在IE6下給邊框加transparent的時候，border-style最好設定成虛線(dashed)，經過實測，虛線、點線都可以
在IE6，7下，不支援給塊標籤加inline-block;
解決辦法: 在inline-block下，新增以下程式碼 *display:inline; *zoom:1; * IE7 以及IE7以下的瀏覽器認識 haslayout IE渲染引擎中的一個屬性,用來調節元素的渲染模式,當我們把這個屬性設定為true的話，這個元素就跟根據自身的內容大小或者父級的大小，來重新計算自己的寬高. 觸發hasLayout的樣式： * display: inline-block * height: (任何值除了auto) * float: (left 或 right) * position: absolute * width: (任何值除了auto) * zoom: (除 normal 外任意值)
在IE6下，父級有邊框的話，可能會造成子元素 的margin失效
解決辦法:觸發haslayout;