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