Question

关注HTML阻止：

<html>
<body>
    <div style="background-color: #fecfff;">
        <div style="float:left;">
            <div style="height:40px; width:40px; background-color:Red"> </div>
            Karl Mac
        </div>

        <div>
            some comments details<br />
            <div style="padding-top: 10px">
                links
            </div>
    </div>
</body>
</html>

产生以下内容：

enter image description here

在这2列布局中，如何让Karl Mac覆盖父容器的颜色？如果我添加“overflow：auto”，它将在Firefox和Chrome中得到修复。但问题仍存在于IE中。谢谢！

Answer 1

你需要在主div中<div style="clear:both;"><div>。

<html>
<body>
    <div style="background-color: #fecfff;">
        <div style="float:left;">
            <div style="height:40px; width:40px; background-color:Red"> </div>
            Karl Mac
        </div>

        <div>
            some comments details<br />
            <div style="padding-top: 10px">
                links
            </div>
            <div style="clear:both;"><div>
    </div>
</body>
</html>

代码：http://jsfiddle.net/cCuab/

Answer 2

正如您为Chrome＆amp;做的那样火狐：

overflow: auto;

使其在旧IE中也能正常工作：

overflow: auto; zoom: 1;

zoom在旧IE中启用“hasLayout”，它可以解决许多CSS错误。还有其他方法可以启用hasLayout，以获取更多信息：http://www.satzansatz.de/cssd/onhavinglayout.html

浮动左侧查询未被父级覆盖

2 个答案: