Question

我在Chrome中使用三个项目时遇到问题。基本上，它是左边的图像，右边有两个div。问题是严重浮动的潜水正在下降到图像的底部。这是Chrome中的已知问题，我该如何解决？好像在IE，Opera，Safari和＆amp;火狐...

这是代码：

    <body>
    <div id="container">
        <div id="header">
            <img src="image1.gif" width="320" alt="Logo"/>
            <div id="social">
                <img src="images/facebook_logo.png" alt="Facebook logo" width="25" />
                <img src="images/twitter.png" alt="Twitter logo" width="25" />
            </div>

            <div id="review">
        <img src="roundel1.gif" alt="Click here!" style="float:left; width:50px;"/><div>
                    FREE service!
                </div>
            </div>
</div>
</div>
</body>
</html>

和CSS：

* {
  margin:0;
  padding:0;
}

body    {
    background-image:url(../images/greenbg.png);
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:120%;
    }
#container           {
    margin-left:auto; 
    margin-right:auto; 
    width:960px;
    background-color:#FFF;
}
#header {
    height:100px;
}
#header-image   {
    float:left;
}
/* flyout boxes */

#review {
    float:right;
    width:216px;
    border-style:solid;
    border-width:2px;
    height:63px;
    margin-right:20px;
}
#social {
    float:right;
    width:136px;
    border-style:solid;
    border-width:2px;
    height:48px;
    }

Answer 1

对于任何找到这个主题的人来说，我在复杂的响应式设计中遇到了同样的问题，其中两个大小相等的左浮动div，右边的div比右边的div低了约20 - 30px。

这似乎是Chrome的一个错误，因为div在所有其他浏览器（包括IE9，IE8和IE7）中显示为预期。

问题：这两个div的父包装上放置了上边距

margin-top: 30px;

解决方案：改为使用填充，适用于MSIE＆gt; 6，Opera，Chrome，FF，Safari

padding-top: 30px;

希望这可以为你节省一些挫折和时间，因为这非常烦人。

Answer 2

我能够重现您的问题，最后在Chrome中打开开发人员工具，然后查看评论的css代码div并停用float规则并重新启用它。这是你如何解决问题的？如果是，那么解决方案可能是floating图像到left。在我的情况下，它提出了解决方案。如果没有，那么如果您提供图像，将会有所帮助。感谢

在Chrome中浮动div，显得不合适

2 个答案: