兼容問題目錄
1、IE6下怪異盒模型
2、IE6下最小高度問題
3、IE6下不支持1px的點線
4、IE6下內容會把父級的高度撐開
5、IE6下只支持給a標簽添加偽類
6、IE67下不支持給塊標簽加display:inline-block
7、IE8以及IE8以前的瀏覽器都不支持opacity
后續兼容性問題處理鏈接地址：
http://blog.csdn.net/baidu_37107022/article/details/71973570
http://blog.csdn.net/baidu_37107022/article/details/71977053
1、IE6下怪異盒模型
在標准模式下的盒模型，
盒子總寬度/高度=width/height+padding+border+margin
在怪異模式下的盒模型，
盒子的總寬度和高度是包含內邊距padding和邊框border寬度在內的，
盒子總寬度/高度=width/height + margin = 內容區寬度/高度 + padding + border + margin;
解決辦法
在css3中有一個屬性box-sizing來處理是用何種模型進行解析。
box-sizing有兩個值一個是content-box，另一個是border-box。
當設置為box-sizing:content-box時，將采用標准模式解析計算，也是默認模式；
當設置為box-sizing:border-box時，將采用怪異模式解析計算；
目前使用此屬性需要前綴如下:
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
代碼演示
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style> div{ width: 100px; height: 100px; border: 10px solid #000; padding: 10px; background: red; } </style>
</head>
<body>
<!-- 標准盒模型 總寬度=width+padding+border 怪異盒模型 總寬度=width 注意此時是沒有<!DOCTYPE html>聲明的 -->
<div>123</div>
</body>
</html>
什么是盒模型鏈接：http://blog.csdn.net/baidu_37107022/article/details/71272900
2、IE6下最小高度問題
解決辦法
1、overflow:hidden 推薦
2、font-size: 0;
代碼演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style> div{ height: 1px; background: red; /*font-size: 0;*/ } </style>
</head>
<body>
<!-- IE6下塊元素高度小於19px，會被當做19px來處理 解決辦法 1、overflow:hidden 推薦 2、font-size: 0; -->
<div></div>
</body>
</html>
3、IE6下不支持1px的點線
解決辦法：
IE6不支持一像素的點划線，用背景圖代替
代碼演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style> div{ width: 500px; height: 100px; border: 1px dotted #f00; } </style>
</head>
<body>
<!-- IE6不支持一像素的點划線，用背景圖代替 -->
<div></div>
</body>
</html>
4、IE6下內容會把父級的高度撐開
解決辦法
overflow: hidden;
代碼演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style> div{ width: 200px; height: 200px; border: 1px solid #000; overflow: hidden; } </style>
</head>
<body>
<!-- IE6下內容會把父級的高度撐開 解決辦法 overflow: hidden; -->
<div>
這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊這里是內容啊
</div>
</body>
</html>
5、IE6下只支持給a標簽添加偽類
IE6不支持除了a標簽以外標簽的偽類—無法解決
代碼演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style> a:hover{ color: #f00; } div{ width: 100px; height: 100px; background: red; } div:hover{ background: green; } </style>
</head>
<body>
<!-- IE6不支持除了a標簽以外標簽的偽類 -->
<a href="#">kaivon</a>
<div></div>
</body>
</html>
6、IE67下不支持給塊標簽加display:inline-block
無法解決
**根本原因：**IE6、7不認識inline-block，給行內元素加上這個屬性后會觸發IE的haslayout特點，會讓行內元素具有與inline-block一樣的特征，所以它不支持塊元素的inline-block。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style> span,div{ width: 100px; height: 100px; background: red; display: inline-block; } </style>
</head>
<body>
<!-- IE67不支持塊元素display:inline-block -->
<div>kaivon1</div>
<div>kaivon2</div>
<span>kaivon1</span>
<span>kaivon2</span>
</body>
</html>
普通瀏覽器中效果
IE7中效果
7、IE8以及IE8以前的瀏覽器都不支持opacity
解決辦法
用filter
代碼演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style> div{ width: 100px; height: 100px; background: red; opacity: 0.5; filter:alpha(opacity=50); } </style>
</head>
<body>
<!-- IE8以及IE8以前的瀏覽器都不支持opacity 解決辦法 用filter -->
<div>kaivon</div>
</body>
</html>