主要记录我在调试IE6时遇到的一些问题:
1.float right 换行bug
产生原因:块里面有几个行内元素,最后一个需要在右边。
结构例如:<div>
<span class="left">左边</span>
<span class="center">中间</span>
<span style="float: right"class="right">右边</span>
</div>
IE6中的显示是:右边的跳到下一行里面。
解决方法:把float的模块放到非float的前面即可
2.IE6的png半透明问题
产生原因:IE6不支持png24的Alpha透明背景,但是它支持png8格式的全透明背景是索引透明背景。
解决方法大全:
http://www.cnblogs.com/wanghun/archive/2012/03/29/2423024.html
使用过后的疑惑:
2.1方法一的直接使用滤镜效果,图片是成功了,但是文字消失了。
2.2方法五使用貌似无效,不知是否是路径有误。
2.3方法七成功,但是同学使用的时候出错,究其原因应该是JS混乱了。
3.IE6的margin-top失效
我这个失效很奇异,跟网上说的情况完全不同,因为我的div是body的第一个元素,不知道是不是里面设置了position:relative
暂时想到的解决方法是:
使用body设置padding-top把div层顶下来。
4.IE6,IE7上使用inline-block
display:inline-block;
*display:inline; /*for IE6 IE 7*/
*zoom:1;
IE6、7 中 display:inline-block 是可以触发 hasLayout 的,触发了 hasLayout 的元素表现出来的特征就是一个独立的矩形容器,可以设置宽高而且不受外部元素的影响,类似于现代浏览器中的 Block formatting contexts (块级格式化上下文)的概念。当IE6 中元素使用了inline-block只是触发了 hasLayout 也不能具有 inline-block 元素不换行的特性。需要元素转化为 inline 元素,强制其不换行;然后通过 zoom:1 触发 hasLayout,使其可以设置宽高。
5.IE6的清除浮动
.clearfix:after{
visibility:hidden;
display:block;
font:0;
content:"";
clear:both;
height:0;
}
.clearfix{
*zoom:1; /*for IE6*/
}
6.使用inline-block和text-indent引起的问题
在IE6、IE7中使用inline-block(这里已经用了上面hack的方法),再使用text-indent时,文字以及整个层都会移动响应的位置。
解决方法:
1.改回display:block。
我个人认为如果我自己的话,不会采用这个方法的,我就是想要inline-block那个显示方式,为啥我还要改回block呢。
2.使用font-size:0; line-height:0;
我个人也不推荐这个,对于可访问性非常不好。
3.在那标签Html前面加上
这个我也不大推崇,因为CSS的事情不应该使用Html来hack。
4.给元素加 position:absolute;
可以说只剩下这个较为可行了。
造成这样的原因:IE6/IE7并没有真正实现inline-block,而是通过设置display:inline-block触发了IE的layout,从而使内联元素拥有了inline-block属性的表症。inline或inline-block元素设置text-indent在IE6/IE7中显示不正常的bug致使text-indent会传递到父及元素,也就出现了以上所说的问题。