Google Chrome - 字段集溢出错误

Question

Google Chrome 在字段集中溢出内容时似乎存在错误。

这是一个演示问题的 jsfiddle：http://jsfiddle.net/Dismissile/Lnm42/

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

<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 hack/fix，以便在 Chrome 的字段集中时内容正确溢出？

Answer 1

更新：

从最近的 Chrome for MS Windows 更新（可能是 v28？还没有找到它），auto 不再是 min-width 的有效值，并且此解决方案不再有效！

新解决方案：

使用inherit 而不是auto 似乎可以解决我迄今为止测试过的所有情况的问题。 （包括原始小提琴.. 详情请参阅the new fiddle fix。）

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

原答案：

Chrome 为 fieldset 定义了默认用户代理样式：min-width: -webkit-min-content。

因此，当您的可视区域（又称“屏幕”）小于具有特定宽度的 div 时，-webkit-min-content 会增大字段集以适应内容的大小（加上填充等）。

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

我修好了你的小提琴，try it out！

Answer 2

使用伪字段集（又名<div class="fieldset"></div>）我相信你可以接近。见jsfiddle。

试试这个样式：

fieldset,.fieldset {
   margin: 10px;
   border: solid 1px black;
   position: relative;
   padding: .5em;
}

.legend {
   left: 0.5em;
   top: -0.6em;
   color: black;
   position: absolute;
   background-color: white;
   padding: 0 0.25em 0 0.25em;
}

它不太理想，因为需要复制字段集样式，但对我来说，这是我能够想出的解决这个问题的唯一可以容忍的解决方案。如上所述，您可以将现有的字段集样式应用于伪字段。

Answer 3

试试：

fieldset {
  display: table-cell;
  min-width: 0;
  box-sizing: border-box;
}

这是您的修复示例：http://jsfiddle.net/2u3a9goc/

Answer 4

使用 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);
});

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

Answer 5

您可以添加 style="display:table-column;"到 fieldset 作为一种解决方法。