css-兼容性问题及解决（一）_html/css_WEB-ITnose

css-兼容性问题及解决(一)

1：在IE6下元素的高度的小于19px的时候，会被当做19px来处理

解决办法: overflow:hidden;

 1  2  3  4  5  6 14 15 16 
17 18 

2： 1px dotted 在IE6下不支持 　　

解决：切背景平铺

 1  2  3  4  5  6 13 14 15 
16 17 

3： 在IE6下父级有边框的时候，子元素的margin值消失，在IE6下解决margin传递要触发haslayout

解决办法:触发父级的haslayout

IE6下子元素margin值失效

触发haslayout

4：IE6下双边距BUG ，也就是说，在IE6下块元素有浮动和横向的margin值，横向的margin值会被放大成两倍

 1  2  3  4  5  6 15 16 17 
18 19 

5：在IE6，7下，li本身没浮动，但是li的内容有浮动，li下边就会产生一个4px间隙

解决办法:

1.给li加浮动，并且要加上宽度

2.给li加vertical-align

 1  2  3  4  5  6 18 19 20 
21  
22      23         24     
25     
26      27         28     
29     
30      31         32     
33 
34 35 

ie6,7下

vertical-align:top

6：在IE6，7下，li本身没浮动，但是li的内容有浮动，li下边就会产生一个4px间隙,如果和最小高都问题并存的时候，也要个li加浮动

 1  2  3  4  5  6 20 21 22 
23     
24         25         26     
27     
28         29         30     
31     
32         33         34     
35 
36 37 

7：当一行子元素占有的宽度之和和父级的宽度相差超过3px,或者有不满行状态的时候,最后一行子元素的下margin在IE6下就会失效

解决办法:精确计算父级和子元素的宽度

或者有不满行状态的时候,最后一行子元素的下margin在IE6下就会失效

 1  2  3  4  5  6 14 15 16 
17  
1
18     
2
19     
3
20     
4
21     
1
22     
2
23     
3
24     
4
25     
1
26     
2
27     
3
28 
29 30 

当一行子元素占有的宽度之和和父级的宽度相差超过3px,最后一行子元素的下margin在IE6下就会失效

 1  2  3  4  5  6 14 15 16 
17  
1
18     
2
19     
3
20     
4
21     
1
22     
2
23     
3
24     
4
25     
1
26     
2
27     
3
28     
4
29 
30 31