IE7中奇怪的浮动行为 [英] Strange float behaviour in IE7

问题描述

我想创建一个包含标题栏和一些工具按钮的标题栏的简单框。我有以下标记：

I want to create a simple box with a header bar containing a title and some tool buttons. I have the following markup:

<div style="float:left">
    <div style="background-color:blue; padding: 1px; height: 20px;">
        <div style="float: left; background-color:green;">title</div>
        <div style="float: right; background-color:yellow;">toolbar</div>
    </div>
    <div style="clear: both; width: 200px; background-color: red;">content</div>
</div>

这在Firefox和Chrome中可以很好：

This renders fine in Firefox and Chrome:

但是IE7完全混乱，页面右侧的元素：

However IE7 totally messes up and puts the right floated element to the right of the page:

可以修复这个问题吗？

推荐答案

如果你的内容div中的宽度表示这是你的框的总宽度，只需将它添加到最外面的div，并（可选）从内容中删除，如下：

Specify width in outermost div. If that width in your content div means this is the total width of your box, simply add it to the outermost div, and (optionally) remove it from content, like this:

<div style="float:left; width: 200px;">
    <div style="background-color:blue; padding: 1px; height: 20px;">
        <div style="float: left; background-color:green;">title</div>
        <div style="float: right; background-color:yellow;">toolbar</div>
    </div>
    <div style="clear: both; background-color: red;">content</div>
</div>

这篇关于IE7中奇怪的浮动行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！