我在Chrome中使用三个项目时遇到问题.基本上,它是左边的图像,右边有两个div. 问题是严重浮动的潜水正在下降到图像的底部.这是Chrome中的已知问题,我该如何解决？好像在IE,Opera,Safari和火
问题是严重浮动的潜水正在下降到图像的底部.这是Chrome中的已知问题,我该如何解决？好像在IE,Opera,Safari和&火狐…
这是代码：
<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;
}
对于任何找到这个主题的人来说,我在复杂的响应式设计中遇到了同样的问题,其中两个大小相等的左浮动div,右边的div将比右边的div低20~30px.
这似乎是Chrome的一个错误,因为div在所有其他浏览器(包括IE9,IE8和IE7)中显示为预期.
问题：这两个div的父包装上放置了上边距
margin-top: 30px;
解决方案：使用填充代替,在MSIE中工作> 6,Opera,Chrome,FF,Safari
padding-top: 30px;
希望这可以节省一些挫折和时间,因为这非常烦人.