Ali*_*liH 3 css google-chrome css-float
我在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;
}
Biz*_*Lab 10
对于任何找到这个主题的人来说,我在复杂的响应式设计中遇到了同样的问题,其中两个大小相等的左浮动div,右边的div将比右边的div低20~30px.
这似乎是Chrome的一个错误,因为div在所有其他浏览器中显示为预期(包括IE9,IE8和IE7).
问题:这两个div的父包装上放置了上边距
margin-top: 30px;
解决方案:使用填充代替,在MSIE> 6,Opera,Chrome,FF,Safari中工作
padding-top: 30px;
希望这可以节省一些挫折和时间,因为这非常烦人.