您的位置:首页 > Web前端 > CSS

css布局:IE下浮动(float)bug

2010-12-09 20:09 453 查看
  今天在做力发精铸这个网站的网时,用css布发现float后在IE下和Firefox下面的结果不一样,代码大致如下:

<div style="width:960px;margin:0 auto;padding:20px;">

<div style="float:left; width:200px; background-color:red">left</div>

<div style="flaot:right; width:500px;background-color:blue">right</div>

<br style="clear:both;" />

<div>底部</div>

</div>

   这段代码在IE下会底部有很大空白,而Firefox下却是正常显示,Firefox更符合我想要的结果,也是正常的布局结果,而IE则让人有感觉有点莫名,其实这就是IE的bug。


然发现问题,就得解决问题,不然看着很不舒服,经过排查,我把原因锁定在了<div style="width:960px;margin:0
auto;padding:20px;">这句上,把padding:20px;去掉后,结果显示正常,padding可用margin变相代替。
至此,问题圆满解决。

  希望遇到此问题的朋友,能看到,节省大家宝贵的时间。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: