3

我在让三个项目漂浮在 Chrome 中时遇到问题。基本上，它是左侧的图像，右侧浮动了两个 div。问题是右浮动潜水下降到图像的底部。这是 Chrome 中的一个已知问题，我该如何解决？在 IE、Opera、Safari 和 Firefox 中似乎没问题...

这是代码：

    <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;
    }
4

2 回答 2

10

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

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

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

margin-top: 30px;

解决方案：改用填充，适用于 MSIE > 6、Opera、Chrome、FF、Safari

padding-top: 30px;

希望这可以为你们中的一些人节省一些挫折和时间，因为这很烦人。

于 2013-02-26T17:20:57.393 回答
2

我能够重现您的问题，最终在 chrome 中打开开发人员工具，然后查看css审查代码div并禁用float规则并重新启用它。这就是你解决问题的方式吗？如果是这样，那么解决方案可能是floating图像left。就我而言，它提出了解决方案。如果没有，那么如果您提供图像将很有帮助。谢谢

于 2012-08-09T22:27:07.963 回答