Chrome不正确计算块的宽度，其中overflow：hidden，left margin和float元素在左侧 [英] Chrome not calculating width correctly for block with overflow: hidden, left margin, and floated element to the left
问题描述
在下列情况下，我遇到了一个Chrome错误：
I've come across a bug in Chrome in the following situation:
- 两个块元素（我们称之为
#rail和#well） -
#rail是悬浮的 c>没有浮动，有溢出设置（隐藏或自动）和左边距集。
- Two block elements (we'll call them
#railand#well) #railis floated left#wellis not floated, has an overflow set (hiddenorauto), and a left margin set.
我观察到的是，在Chrome中， #well 没有它应该的那么宽。从不同宽度的游戏中，Chrome似乎计算出 #well 的宽度，就好像不存在边距以及它所拥有的可用空间。这是减少：
What I'm observing is that, in Chrome, #well is not as wide as it should be. From playing with the different widths, it appears that Chrome is calculating the width of the #well as if neither the margin, nor the available space it inhabits, exists. Here's a reduction:
<html>
<head>
<style type="text/css">
body {
width: 1000px;
font-size: 2em;
color: white;
}
#container {
background-color: green;
}
#rail {
float: left;
width: 100px;
background-color: blue;
}
#well {
overflow: hidden;
margin-left: 500px;
background-color: red;
}
</style>
</head>
<body>
<div id="container">
<div id="rail">RAIL</div>
<div id="well">WELL</div>
</div>
</body>
</html>
附加的Chrome和Firefox减少的屏幕截图。在Firefox中，它是预期的 - 100像素的 #rail ，然后400像素的边缘，然后500px的 #well 。
Screen shots of the reduction in Chrome and Firefox attached. In Firefox, it's as expected -- 100px of #rail, then 400px of margin, then 500px of #well.
所以我想知道，如果有人看到这个之前，如果是这样，是否有一个已知的解决方法。这是为什么我有这种属性组合：
So I'm wondering if anyone's seen this before and, if so, whether there's a known workaround. Here's why I have this combination of properties:
-
#well包含浮动内容我想让它换行，因此overflow。 -
#rail可能或可能不存在于页面上，因此#well上的左边距。
- The
#wellcontains floated content that I'd like for it to wrap, hence theoverflow. - The
#railmay or may not exist on the page, hence the left margin on the#well.
非常感谢任何指针！
这里是在Firefox中：
Here it is in Firefox:
在Chrome中：
推荐答案
尝试将 margin-right：-500px 添加到 #well
我有同样的问题，你的减少帮助我解决了。
I had the same problem and your reduction helped me solve it.
这篇关于Chrome不正确计算块的宽度，其中overflow：hidden，left margin和float元素在左侧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
