目前主流浏览器的兼容性做的都比较好了，本文主要针对IE6，7的不兼容问题进行解决。
1. 有浮动存在时，计算一定要精确，不要让内容的宽高超出我们所设置的宽高，IE6下，内容会撑开设置好的高度。
解决方法 ：给对应的父级加overflow:hidden;但是会有部分被隐藏掉，最好是精确计算宽高再设定
eg：（ie会撑开）
1 style >
2 .box { width : 400px ; }
3 .left { width : 200px ; height : 300px ; background : red ; float : left ; }
4 .right { width : 200px ; float : right ; }
5 .div { width : 180px ; height : 180px ; background : blue ; padding : 15px ; }
6 /*
7 计算一定要精确 不要让内容的宽高超出我们设置的宽高
8 在IE6下，内容会撑开设置好的宽高
9 */
10 style >
11 head >
12 body >
13 div class ="box" >
14 div class ="left" > div >
15 div class ="right" >
16 div class ="div" > div >
17 div >
18 div >
19 body >
2. 在IE6下有元素浮动时，如果宽度需要由内容撑开，就给里边的块元素都加浮动，正常浏览器不用加浮动。
eg：
1 style >
2 .box { width : 400px ; }
3 .left { background : red ; float : left ; }
4 .right { float : right ; background : blue ; }
5 h3 { margin : 0 ; height : 30px ; float : left ; }
6 /*
7 在IE6元素浮动，如果宽度需要内容撑开，就给里边的块元素都加浮动
8 */
9 style >
10 head >
11 body >
12 div class ="box" >
13 div class ="left" >
14 h3 >左侧 h3 >
15 div >
16 div class ="right" >
17 h3 >右侧 h3 >
18 div >
19 div >
20 body >
3. 在IE6下元素的高度的小于19px的时候，会被当做19px来处理
解决办法： 添加overflow:hidden;
4. 在IE6下border:1px dotted #000;中，dotted不支持，会以虚线的方式的出现。
解决方法： 切背景平铺
5. 在所有浏览器中子元素的margin-top，margin-bottom值会传递给父级；
解决办法：
a：给父级都添加浮动（或者给子级添加浮动也能解决margin-top问题，但是margin左右值会出现 双倍 的值，也就是双边据bug问题，下面会讲）；
b：给父级添加position:relative;(或position:absolute;但是会脱离文档流)
c：添加display:inline-block; 正常浏览器，可行，但是IE,7下，块元素不支持display:inline-block;
d: 给附件添加border属性，例如border:1px solid red; 正常浏览器可行，在IE6下必须再给父级添加zoom:1;
eg:
1 style >
2 body { margin : 0 ; }
3 .box { background : blue ; border : 1px solid #000 ; zoom : 1 ; }
4 .div { width : 200px ; height : 200px ; background : red ; margin : 100px ; }
5 /*
6 在IE6下解决margin传递要触发haslayout
7
8 在IE6下父级有边框的时候，子元素的margin值消失
9
10 解决办法:触发父级的haslayout
11 */
12 style >
13 head >
14 body >
15 div class ="box" >
16 div class ="div" > div >
17 div >
18 body >
6. 在IE6下，块元素有浮动和和横向的margin值 ，横向的margin值会被放大成两倍。
解决办法： 添加display:inline;
1 style >
2 .box { float : left ; border : 10px solid #000 ; }
3 .box div { width : 100px ; height : 100px ; background : Red ; margin-right : 20px ; border : 5px solid #ccc ; float : left ; }
4 /*
5 margin-right 一行右侧第一个元素有双边距
6
7 margin-left 一行左侧第一个元素有双边距
8 */
9 style >
10 head >
11 body >
12 div class ="box" >
13 div >1 div >
14 div >2 div >
15 div >3 div >
16 div >4 div >
17 div >
18 body >
7. 在IE6，7下，li自身没浮动，但是li的内容有浮动，li下边就会产生一个间隙
解决办法： 1.给li加浮动
2.给li加vertical-align:top;
注意：当IE6下最小高度问题，和 li的间隙问题共存的时候， 给li加浮动才能解决。
eg:
1 style >
2 ul { margin : 0 ; padding : 0 ; width : 302px ; }
3 li { list-style : none ; height : 30px ; border : 1px solid #000 ; vertical-align : top ; }
4 a { width : 100px ; float : left ; height : 30px ; background : Red ; }
5 span { width : 100px ; float : right ; height : 30px ; background : blue ; }
6 /*
7 在IE6，7下，li本身没浮动，但是li的内容有浮动，li下边就会产生一个间隙
8 解决办法:
9 1.给li加浮动
10 2.给li加vertical-align
11 */
12 style >
13 head >
14 body >
15 ul >
16 li >
17 a href ="#" > a >
18 span > span >
19 li >
20 li >
21 a href ="#" > a >
22 span > span >
23 li >
24 li >
25 a href ="#" > a >
26 span > span >
27 li >
28 ul >
29 body >
8. 当一行子元素占有的宽度之和和父级的宽度相差超过3px,或者有不满行状态的时候,最后一行子元素的下margin在IE6下就会失效
解决方法： 额，还没发现
eg：
1 style >
2 .box { border : 10px solid #000 ; width : 600px ; /* width:603px; */ overflow : hidden ; }
3 .box div { width : 100px ; height : 100px ; background : Red ; margin : 20px ; border : 5px solid #ccc ; float : left ; display : inline ; }
4 /*
5 当一行子元素占有的宽度之和和父级的宽度相差超过3px,或者有不满行状态的时候,最后一行子元素的下margin在IE6下就会失效
6 */
7 style >
8 head >
9 body >
10 div class ="box" >
11 div >1 div >
12 div >2 div >
13 div >3 div >
14 div >4 div >
15 div >1 div >
16 div >2 div >
17 div >3 div >
18 div >4 div >
19 div >1 div >
20 div >2 div >
21 div >3 div >
22 4
查看更多关于css兼容性问题及一些常见问题汇总-jerrylsxu的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did115788