最后一次搞ie兼容性问题,以后都可以不管了0.01.浮动兼容性1.1IE6下的双边距BUG在IE6下,块元素有浮动和横向margin的时候,最边上元素的横向margin值会被放大成两倍解决办法: display:inline;1.2IE6,7下li的间隙在IE6,7下li本身 ...
最后一次搞ie兼容性问题,以后都可以不管了0.0
1.浮动兼容性
1.1IE6下的双边距BUG
在IE6下,块元素有浮动和横向margin的时候,最边上元素的横向margin值会被放大成两倍
解决办法: display:inline;
1.2IE6,7下li的间隙
在IE6,7下li本身没浮动,但是li内容有浮动的时候,li下边就会产生4px的间隙
解决办法: 1.给li加浮动(但是width就变为由自适应内容,所以还要加宽度)
2.给li加vertical-align:top/middle/bottom;
ps:当li间隙问题,和最小高度问题都在时,只能用给li加浮动方法。
1.3ie67清除浮动需要触发haslayout才可以
.clear:after{content:'';display:block;clear:both;}
.clear{zoom:1;}
after伪类: 元素内部末尾添加内容;
:after{content"添加的内容";} IE6,7下不兼容
zoom 缩放
a、触发 IE下 haslayout,使元素根据自身内容计算宽高。
b、FF 不支持;
1.4ie6,7下左边元素浮动,右边元素通过margin并到一行,会出现3像素bug。
解决方法:通过浮动并在一行
1.5当浮动元素和绝对定位元素是并列关系的时候,在IE6下绝对定位元素会消失
解决办法:
给定位元素外面包个div
1.6在IE6下的文字溢出BUG
子元素的宽度和父级的宽度相差小于3px的时候,两个浮动元素中间有注释或者内嵌元素的时候,ie6下文字会溢出
解决办法:用div把注释或者内嵌元素用div包起来
1 <style> 2 3 .wrap{ width:300px;} 4 5 .left{float:left;} 6 7 .right{width:300px;float:right;} 8 9 </style>10 11 <div class="wrap">12 13 <div class="left"></div>14 15 <div><!-- IE6下的文字溢出BUG --><span></span></div>16 17 <div class="right">范德萨范德萨范德萨</div>18 19 </div>
原标题:ie下面兼容性问题的一些总结
关键词:ie
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。