Css 浮动div';s为镀铬,显示位置不正确
我有一个问题,让三个项目浮动在铬。基本上,左边是一幅图像,右边有两个div浮动。 问题是垂直漂浮的跳水下降到了图片的底部。这是Chrome中的已知问题吗?我如何修复它?在IE、Opera、Safari和Firefox中看起来不错 代码如下:Css 浮动div';s为镀铬,显示位置不正确,css,google-chrome,css-float,Css,Google Chrome,Css Float,我有一个问题,让三个项目浮动在铬。基本上,左边是一幅图像,右边有两个div浮动。 问题是垂直漂浮的跳水下降到了图片的底部。这是Chrome中的已知问题吗?我如何修复它?在IE、Opera、Safari和Firefox中看起来不错 代码如下: <body> <div id="container"> <div id="header"> <img src="image1.gif" width="320"
<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>
我终于能够重现您的问题,在chrome中打开开发者工具,然后查看review
div
的css
代码,禁用float
规则并重新启用它。这就是你遇到问题的原因吗?如果是这样,则解决方案可能是将图像浮动到左侧。就我而言,它解决了问题。
如果没有,那么如果你提供一个图像,这将是有益的。
感谢找到这个主题的人,我在一个复杂的响应式设计中遇到了同样的问题,如果有两个大小相等的左浮动div,右div的偏移量将比右div低约20-30px 这似乎是Chrome的一个缺陷,因为div在其他浏览器(包括IE9、IE8和IE7)中的显示与预期一致 问题:这两个div的父包装上的上边距
margin-top: 30px;
解决方案:改用填充,适用于MSIE>6、Opera、Chrome、FF、Safari
padding-top: 30px;
希望这能为你们中的一些人节省一些挫折和时间,因为这很烦人。你们能提供一个屏幕截图或一把小提琴吗?我已经在玩了。它在我的chrome浏览器中工作。嗯,这确实令人困惑。回到绘图板,可能是缓存错误。。。谢谢波提诺,不是那样的。即使使用完全相同的代码,也会产生很大的结果。例如www.alihurworth.co.uk/wrl2/temp4.htmlI也遇到了类似的问题。我还没有找到解决这个问题的方法。基本上,我在绝对(底部:0)页脚中有一个右浮动img。在响应性设计中,img隐藏在较小的设备上。回到桌面时,img的位置不正确。谢谢。标题图像已向左浮动。看起来是这样的:对不起,我按照你上面提供的截图中的url。我使用的是chrome 20.0.1096.1,但我看到这三个块完全对齐。还有一个标题图像机器人的id,似乎你没有在代码中使用它。你能检查一下吗?现在,我可以通过在徽标的图像标签中添加display:block规则来重现这个问题。当它占据了整个宽度时,它推动了下面的其他内容。更奇怪的是,它似乎是断断续续的。它偶尔会工作,但刷新页面会让它恢复。这就像图像是一个块。标题图像标记现在已消失。我用的是Chrome 21.0.1180.75谢谢,这真的帮了我大忙。我不明白为什么我的站点上的一个浮动列比它旁边的一个浮动列开始向下移动约40px,但结果是父元素上的边距。按照你的建议,把它们改成填充物解决了这个问题。事实上。。。谢谢我一直认为Chrome和Safari有相同的引擎。
padding-top: 30px;