一、奇数宽高
悲剧的IE6啊,为何有如此多bug,但用户市场又那么大,真让我们搞网站的纠结。今天就遇到了一个非常奇怪但又很细节的一个bug,一个外部的相对定位div,内部一个绝对定位的div(right:0),如下图所示:
可是在IE6下查看,却变成了right:1px的效果了,是特效吗,不像:
结果发现只要外部div的高或宽为奇数时,就会出现如上1px的问题,修复问题的解决方案就是把外部div的高或宽设为偶数。
以下是css代码:
#outer {
609px;/*这里宽度为奇数,bug就出现了!!改成偶数就OK了*/
height: 300px;
position: relative;
background:#CC9900;
color:#FFF;
}
#inner {
200px;
height: 250px;
position: absolute;
top: 0px;
right: 0px;
background:#FFCC00;
}
以下是html代码:
<DIV id=outer>
#outer 相对定位
<DIV id=inner>#inner 绝对定位</DIV>
</DIV>
虽然这只是1px的问题,非常非常细节,但对于那些最求完美网页设计的人来说这个bug是难以忍受的,虽然上面的解决方案有点投机取巧,但我可以告诉你,解决的ie6 bug的方法大部分都这样,勉强用着吧。
二、双倍边距
IE6 的bug算是让人头疼甚至蛋疼到了极点,有时候他的种种bug会带给你无限的惊奇,有时候一个在其他浏览器上非常完美的网页到IE6上就乱成一团。今天就遇到了这个问题,在firefox上调试页面时页面都没问题,但一到IE6上,吓了一跳,布局完全乱掉。后来发现是IE6下浮动层双倍边距的bug引起的,于是就把问题整理了一下,分享给大家,相信写网页的朋友一定会遇到这种神奇的事情的。
1、bug问题描述:
一个浮动的div在IE6下可能会产生双倍边距的bug问题,具体产生的条件是:如果左浮动,则左边距加倍;如果右浮动,则右边距加倍。见下图:
正常的情况下margin-left是50px
IE6下margin-left变成了100px,加倍了:(
2、解决办法:
解决办法也很简单,只要给浮动层加一个css属性display:inline即可解决问题。