以下是一些比较常见的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 -->
