Google Chrome - Fieldset溢出错误

Question

谷歌浏览器似乎在溢出字段集内的内容时出现错误.

这是一个证明问题的jsfiddle:http://jsfiddle.net/Dismissile/Lnm42/

如果你查看页面,你会看到当你在一个fieldset中有一个容器,并且容器已overflow: auto设置,并且该容器的内容将水平溢出时,fieldset实际上是扩展而不是使用滚动条:

<fieldset class="parent">
    <div class="child">
        <div class="grandchild">
            asdf
        </div>
     </div>
</fieldset>

<div class="parent">
    <div class="child">
        <div class="grandchild">
            asdf
        </div>
    </div>
</div>

CSS:

.parent {
    border: 1px solid green;
    padding: 20px;
    margin: 20px;
}

.child {
    border: 1px solid red;
    padding: 20px;
    overflow: auto;
}

.grandchild {
    border: 1px solid #ccc;
    width: 2000px;
    padding: 10px;
}

我是否可以使用CSS黑客/修复程序,以便在Chrome中的字段集内部内容正常溢出？

Answer 1

更新:

截至最近的Chrome for MS Windows更新(可能是v28？尚未跟踪它),auto不再是有效值min-width,此解决方案不再有效!

新解决方案:

使用inherit而不是auto似乎解决了我到目前为止测试的所有情况的问题.(包括原始小提琴.. 详细信息请参见新的小提琴修复.)

更新后的修复: FIELDSET {min-width: inherit; }

原始答案:

Chrome定义fieldset了默认的用户代理样式:min-width: -webkit-min-content.

因此,当您的可视区域(也称为"屏幕")小于div特定宽度时,可以-webkit-min-content增大字段集以适应内容的大小(加上填充等).

修复: FIELDSET { min-width: auto; }

我修理你的小提琴,尝试一下!

Answer 2

使用 JavaScript 设置视口的宽度：

• http://jsfiddle.net/Lnm42/2/

我添加了一个名为fieldset-width字段集的类：

<fieldset class="parent fieldset-width">

然后添加这个 JQuery 代码：

$(document).ready(function() {
  $(".fieldset-width").css("width", $(window).width() - 82);
});

$(window).resize(function() {
  $(".fieldset-width").css("width", $(window).width() - 82);
});

我唯一的评论是，我想不出干扰默认字段集功能的充分理由。我一开始就不喜欢“滚动条中的滚动条”。对于字段集通常围绕的输入字段，我会特别谨慎地让用户滚动以到达所有输入字段。