CSS hack
\9 所有的IE10及之前
* IE7以及IE7以下版本的
_ IE6以及IE6以下版本的
1、ie6，7，8對H5標簽兼容
頁面中引入html5shiv.js，下載地址:https://github.com/aFarkas/html5shiv
2、IE6雙邊距
當元素浮動后，再設置同方向margin，會產生雙邊距
解決：增加
*display:inline;
3、IE6最小高度問題
IE6下最小高度19px，想小於此高度，增加
*overflow:hidden;
4、li里元素都浮動 li 在IE6 7 下方會產生4px間隙問題
針對li添加
*vertical-align: top;
5、浮動元素之間注釋，導致多復制一個文字問題
兩個浮動元素中間有注釋或者內聯元素並且和父級寬度相差不超過3px時，
1）兩個浮動元素中間避免出現內聯元素或者注釋
2）與父級寬度相差3px或以上
6、IE6 7 父級元素的overflow:hidden 是包不住子級的relative
針對ie6、7給父級元素添加相對定位
overflow: hidden; *position: relative;
7、IE6下絕對定位元素父級寬高是奇數,絕對定位元素的right和bottom值會有1px的偏差
避免父級寬高出現奇數
8、IE6下絕對定位元素和浮動元素並列絕對定位元素消失
浮動元素和絕對定位元素是同級的話定位元素就會消失
解決:不處於同級
9、IE6 下input的空隙
給input元素添加float
10、display:inline-block
IE6下使用
*display:inline; *zoom:1;
11、margin兼容性問題
1）margin-top傳遞
觸發BFC、haslayout，父元素增加
overflow: hidden; zoom:1;
2）上下margin疊壓
盡量使用同一方向的margin，比如都設置top或者bottom
12、p 包含塊元素嵌套規則
不要嵌套
13、IE6下子元素超出父級寬高，會把父級的寬高撐開
不要讓子元素的寬高超過父級
14、第一塊元素浮動,第二塊元素加margin值等於第一塊元素,在IE6下會有間隙問題;
1）不建議這么寫
2）用浮動解決
15、元素浮動之后,能設置寬度的話就給元素加寬度.如果需要寬度是內容撐開,就給它里邊的塊元素加上浮動
浮動元素中存在塊元素,給塊元素增加float
16、IE6不支持png24 圖片
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/DD_belatedPNG_0.0.8a.js"></script> <script> DD_belatedPNG.fix("img, div"); </script> <style> body{ background-color: red; } div{ width: 300px; height: 300px; background: url("img/png.png") no-repeat; } </style> </head> <body> <div></div> <img src="img/png.png" alt="" /> </body> </html>
2）原生濾鏡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/DD_belatedPNG_0.0.8a.js"></script>
<script>
DD_belatedPNG.fix("body");
</script>
<style>
body{
width: 500px;
height: 500px;
background:red url("img/png.png") no-repeat;
_background-image:none;
_filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/png.png", sizingMethod="crop");
}
</style>
</head>
<body>
</body>
</html>