以下是一些比較常見的IE6 7下的兼容性問題。
在當下這個時代，其實我們幾乎可以不用再去針對IE6做兼容性的處理，除非你的公司還是詭異的要求你兼容到IE6。但是了解一些常見的兼容性問題還是可以幫助我們提高一些布局上的技巧。
以下內容並不需要背下來，其實只要做到見過，萬一某一天真碰到了這樣的問題知道在哪里可以查看解決方法就可以了。
另外最重要的一點，我認為布局上的規范與合理是解決兼容性的最佳方案。如果布局規范，層次結構清晰，明確，那么至少在IE7下我們其實都不用做特別多的針對性的兼容處理。如果你的css需要針對IE7進行大量的hack與調試的話，最好還是檢查一下自己布局上的缺陷與問題可能會更好一些。
1.
H5標簽不兼容，比如header，section，footer等
解決方法：
1 <style type="text/css">
2 header {
3 display: block; //自定義標簽默認為inline元素，需手動轉成block，不然寬高不起作用
4 width: 100px;
5 height: 100px;
6 background: red;
7 }
8 </style>
9 <script type="text/javascript">
10 document.createElement('header'); //自己創建header標簽
11 </script>
因為創建出的是自定義元素，所以默認是內聯元素，需要display : block轉成塊元素，實際開發中，由於代碼量過大，所以一般我們選用引入專門針對H5標簽兼容的 JS 庫
2.
IE6下，塊元素包含塊元素浮動，如果被包含的塊元素設置高度，則被包含的塊元素會撐滿一行，而不是隨父元素浮動
1 <style type="text/css">
2 .box {
3 width: 200px;
4 border: 1px solid black;
5 overflow: hidden;
6 }
7 .left {
8 float: left;
9 background: red;
10 }
11 .right {
12 float: right;
13 background: yellow;
14 }
15 h2 {
16 height: 50px;
17 }
18 </style>
19 <!--
20 解決方案 : h2 {float: left;} //被包含的塊元素也設置浮動，可解決此問題
21 -->
22 </head>
23 <body>
24 <div class="box">
25 <div class="left">
26 <h2>左邊</h2>
27 </div>
28 <div class="right">
29 <h2>右邊</h2>
30 </div>
31 </div>
32 </body>
3.
左右兩個塊元素，左面浮動，右面設置margin-left，IE6下會導致有一條縫隙的出現
1 <style type="text/css">
2 body {
3 margin: 0;
4 padding: 0;
5 }
6 .box {
7 width: 300px;
8 border: 1px solid black;
9 overflow: hidden;
10 }
11 .left {
12 float: left;
13 background: red;
14 width: 100px;
15 height: 100px;
16 }
17 .right {
18 width: 100px;
19 height: 100px;
20 background: yellow;
21 margin-left: 100px; //不要這么做，如果想達到並排顯示的效果，設置該元素float:left;
22 }
23 </style>
24 <!--
25 解決方案: .right { float: left;}
26 -->
27 </head>
28 <body>
29 <div class="box">
30 <div class="left"></div>
31 <div class="right"></div>
32 </div>
33 </body>
4.
IE6下子元素寬高大於父元素寬高，會撐開父元素
1 <style type="text/css">
2 .box1 {
3 width: 50px;
4 height: 50px;
5 border: 10px solid black;
6 }
7 .box2 {
8 width: 100px;
9 height: 100px;
10 background: yellowgreen;
11 }
12 </style>
13 <!--
14 解決方案：別這么寫
15 -->
16 </head>
17 <body>
18 <div class="box1">
19 <div class="box2"></div>
20 </div>
21 </body>
5.
關於margin的重疊
1 <style type="text/css">
2 * {
3 margin: 0;
4 padding: 0;
5 }
6 .box {
7 background: yellowgreen;
8 }
9 .top, .bottom {
10 margin: 50px; //子元素的margin-top傳遞到了父元素上，並且上下元素的垂直方向上的margin發生了合並，並不是100px，而是50px
11 height: 50px;
12 }
13 .top {
14 background: red;
15 }
16 .bottom {
17 background: blue;
18 }
19 </style>
20 <!--
21
22 1.傳遞的margin，對於現代瀏覽器可以觸發BFC，比如overflow:hidden;對於IE低版本可以觸發haslayout，比如zoom:1;
23 2.垂直方向上合並的margin,我們盡量采用避開此布局方法的方式解決
24
25 -->
26 </head>
27 <body>
28 <div class="box">
29 <div class="top"></div>
30 <div class="bottom"></div>
31 </div>
32 </body>
6.
IE6下，display : inline-block;失效
1 <style type="text/css">
2 * {
3 margin: 0;
4 padding: 0;
5 }
6 div {
7 display: inline-block;
8 width: 50px;
9 height: 50px;
10 border: 1px solid black;
11 *display:inline; //CSS hack *只有IE6能識別，轉成內聯元素，並觸發haslayout
12 *zoom:1;
13 }
14 </style>
15 <!--
16 解決方案
17 *display:inline;
18 *zoom:1;
19 -->
20 </head>
21 <body>
22 <div></div><!--
23 --><div></div><!--
24 --><div></div>
25 </body>
7.
IE6最小高度
1 <style>
2 div {
3 height: 1px;
4 background: red;
5 overflow: hidden; //IE6下最小高度19px, 加上overflow: hidden; 可解決最小高度問題
6 }
7 </style>
8.
IE6 7雙邊距問題
1 <style>
2 * {
3 margin: 0;
4 padding: 0;
5 }
6 div {
7 height: 100px;
8 width: 100px;
9 float: left;
10 margin-left: 50px;
11 background: red;
12 *display: inline; //針對IE6 7 hack
13 }
14 </style>
15 <!--
16 當元素同時設置float: left與margin-left時，元素的外邊距會 *2，此處為100px
17 解決方法： Csshack *display: inline;
18 -->
9.
IE6 7 li里元素都浮動會導致下方產生4px的間隙
1 <style>
2 * {
3 margin: 0;
4 padding: 0;
5 }
6 div {
7 height: 100px;
8 width: 100px;
9 float: left;
10 margin-left: 50px;
11 background: red;
12 *display: inline; //針對IE6 7 hack
13 }
14 </style>
15 <!--
16 當元素同時設置float: left與margin-left時，元素的外邊距會 *2，此處為100px
17 解決方法： Csshack *display: inline;
18 -->
19 9.
20 IE6 7 li里元素都浮動會導致下方產生4px的間隙
21
22
23 <style>
24 * {
25 margin: 0;
26 padding: 0;
27 }
28 ul {
29 list-style: none;
30 width: 300px;
31 }
32 li {
33 border: 1px solid red;
34 height: 30px;
35 line-height: 30px;
36 overflow: hidden;
37 *vertical-align: top; //針對IE6 7 hack
38 }
39 a {
40 float: left;
41 }
42 span {
43 float: right;
44 }
45 </style>
46 <!--
47 解決方案：針對IE6 7垂直方向向上對齊
48 -->
49 </head>
50 <body>
51 <ul>
52 <li>
53 <a href="">左邊</a>
54 <span>右邊</span>
55 </li>
56 <li>
57 <a href="">左邊</a>
58 <span>右邊</span>
59 </li>
60 <li>
61 <a href="">左邊</a>
62 <span>右邊</span>
63 </li>
64 <li>
65 <a href="">左邊</a>
66 <span>右邊</span>
67 </li>
68 </ul>
69 </body>
10.
IE6下文字溢出問題
1 <style>
2 .box {
3 width: 300px;
4 border: 1px solid red;
5 overflow: hidden;
6 }
7 .left {
8 float: left;
9 }
10 .right {
11 float: right;
12 width: 298px;
13 }
14 </style>
15 </head>
16 <!-
17 當浮動元素之間出現內聯元素或注釋並且寬度與父元素相差3px以內時，會出現多出文字問題
18 解決方法：避免出現內聯元素或是寬度差大於3px
19 -->
20 <body>
21 <div class="box">
22 <div class="left"></div>
23 <span></span>
24 <div class="right">會多出文字的</div>
25 </div>
26 </body>
11.
IE6 7下父元素overflow: hidden;包不住relative的子元素
1 <style>
2 .box {
3 width: 100px;
4 height: 100px;
5 border: 10px solid red;
6 overflow: hidden;
7 *position: relative; //針對IE6 7hack，讓父元素也相對定位
8 }
9 .div1 {
10 width: 150px;
11 height: 150px;
12 background: blue;
13 position: relative;
14 }
15 </style>
16 </head>
17 <body>
18 <div class="box">
19 <div class="div1"></div>
20 </div>
21 </body>
12.
IE6下絕對定位元素的父級寬高為奇數時，絕對定位元素right與bottom會有1px的偏差
1 <style>
2 .box {
3 width: 99px;
4 height: 99px;
5 background: red;
6 position: relative;
7 }
8 .div1 {
9 width: 20px;
10 height: 20px;
11 background: blue;
12 position: absolute;
13 right: 0;
14 bottom: 0;
15 }
16 </style>
17 </head>
18 <!-
19 解決方案：避免父元素寬高為奇數
20 -->
21 <body>
22 <div class="box">
23 <div class="div1"></div>
24 </div>
25 </body>
13.
定位元素與浮動元素屬於同級關系，並且浮動元素蓋住定位元素時，定位元素會消失
chrome下
IE下
1 <style>
2 .box {
3 width: 100px;
4 height: 100px;
5 background: red;
6 position: relative;
7 }
8 .div1 {
9 width: 50px;
10 height: 50px;
11 background: yellow;
12 float: left;
13 margin-left: 50px;
14 *display: inline;
15 }
16 span {
17 position: absolute;
18 width: 20px;
19 height: 20px;
20 background: blue;
21 right: -10px;
22 top: -10px;
23 }
24 </style>
25 <!-
26 解決方案：避免定位元素與浮動元素同級，此處將span元素嵌套到另一個元素內
27 -->
28 </head>
29 <body>
30 <div class="box">
31 <div class="div1"></div>
32 <span></span>
33 <!--<div>
34 <span></span>
35 </div>-->
36 </div>
37 </body>
14.
IE下input標簽會留有空隙
1 <style>
2 * {
3 margin: 0;
4 padding: 0;
5 border: none;
6 }
7 .box {
8 width: 100px;
9 height: 30px;
10 background: red;
11 }
12 input {
13 height: 30px;
14 background: white;
15 _float: left; //針對IE6hack
16 }
17 </style>
18 <!-
19 解決方案：針對IE6hack 讓input浮動
20 -->
21 </head>
22 <body>
23 <div class="box">
24 <input type="text">
25 </div>
26 </body>
15.
input輸入類型表單空間背景圖片問題
輸入超過一定字數后會將背景圖片擠走
1 <style>
2 input {
3 background: url("mail.jpg") no-repeat fixed;
4 }
5 </style>
6 </head>
7 <body>
8 <input type="text">
9 </body>
10 <!-
11 解決方案：背景圖片設置fixed屬性
12 -->