写div代码的时候,经常发现明明宽度算得很准确,但是莫明其妙的会和计划的布局不太一样- -|||
开始以为自己代码写的有问题,拼命找bug也一无所获,最后可能会稍微修改样式来达到想要的效果,但终究也是外道..昨晚刨根问底了一次...我靠..原来是IE的问题-_,-
今天跟半半唠叨起这件事,还说要加入反IE的行列来着...为啥别的都没问题就IE有问题嘛..-x-
浮动边距加倍错误(The IE Doubled Float-Margin Bug )
如果某条边与浮动方向同向，则向该边上的浮动框应用边距时，边距会增加一倍。此错误只影响一次或多次浮动的某行中的第一次浮动。
#ax{
float:left;-----------------------------设定了左浮动
width:500px;
height:100px;
}
#bx {
float: left;
width: 150px;
height: 50px;
margin: 0 0 0 10px;--------------设定了左边距10px
}
<div id="ax">
<div id="bx"></div>
</div>
//在IE中导致浮动边距加倍,10px会变成20px...在不知道的情况下,以前多半会选择减少div宽度,觉得是margin和宽度之间出了问题..
解决方法:在margin后面跟一句 display:inline; 就可以了...但是我翻了半天也没有翻到原理,只是说,在这样的情况下,用这样一个声明,就可以阻止IE的边距翻倍,而且并没有任何inline的效果,没有副作用= =b
这个bug实在是很常见= =....据说以前被认为是无法改良的IE的bug...现在虽然IE还是有这bug,但聪明的人们找到了对付它的方法XD~...战丫的IE..
