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黑客/修复程序，以便在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

使用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 3

使用伪字段集（又名<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;
}

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

Answer 4

你可以添加style =“display：table-column;”作为解决方法的字段集。

Answer 5

尝试：

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

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

Google Chrome - Fieldset溢出错误

5 个答案: