元素设置了float而且里面放置内容并不多，其它浏览器显示正常，唯独ie6/7还独占一行显示,float浮动失效？
问题代码：
<div style="float:left;color:#aaa;border:1px red solid; text-align:center;">
<div style="width:18px; height:14px;margin:3px auto 3px; background:blue;">dd</div>
<b style="padding:0 6px; background:red;">ttterewrqwer</b>
</div>
bug触发条件：父元素有设float但没设宽度width,子元素是块状元素还加了margin中的auto属性
解决思路：
将设了浮动带没设宽度的父元素添加text-align:center属性，并将父元素里面加了margin auto属性的块状子元素(display:block)都改成行内块元素(display:inline-block),并去掉该子元素的margin中的auto属性
解决问题后的代码：
<div style="float:left;color:#aaa;border:1px red solid; text-align:center;">
<span style="display:inline-block;width:18px; height:14px;padding:3px 0 3px; background:blue;">dd</span>
<b style=" display:block;padding:0 6px; background:red;">ttterewrqwer</b>
</div>
这是ie6/7浏览器下，父元素有设float但没设宽度width,子元素是块状元素还加了margin中的auto属性时的一个BUG,用上述方法问题可得以解决！
快速留言：
上一篇： 分享仿ipc异次元的百度分享工具条
下一篇： ie6/7 margin-bottom失效解决方法
0条评论( 网友:0 条,站长:0 条 ) 网友评论{有您的评论更精彩....}