Google Chrome中的overflow: hidden hacked吗？

Question

我认为Chrome中的<label>元素有一个错误：

​

<div style="border:1px green solid; overflow:hidden;height:20px;">
  <div style="border:1px red solid;">
    <div>visible</div>
    <div style="position:absolute; border:1px solid;">
      <div style="position:relative;">
        ffff
        <label><input type="checkbox" name="check" /> click label to see hidden content</label>
      </div>
    </div>
    <div>hidden</div>
  </div>
</div>

​

当你点击复选框时，Chrome会将内容滚动到输入控件的位置。为什么Chrome能在其他浏览器(IE，Firefox)正常工作的情况下这么做？

Answer 1

正如@miguel-svq指出的那样，方框正在滚动，行为正确。根据MDN docs：https://developer.mozilla.org/en-US/docs/Web/CSS/overflow，我们看到overflow: hidden也隐藏了卷轴。如果有什么不同的话，那就是这是FireFox中的一个错误，我对此进行了测试，并且它没有像预期的那样滚动框。您可以使用以下内容验证这一点：

​

    <div style="border:1px green solid; overflow: hidden; overflow-y: scroll; height:20px;">
        <div style="border:1px red solid;">
            <div>
                vivsible
            </div>
            <div style="position:absolute; border:1px solid;">
                <div style="position:relative;">
                    ffff
                    <label><input type="checkbox" name="check" /> click label to see hidden content</label>
                </div>
            </div>
            <div>hidden</div>
        </div>

    </div>

​