Html <fieldset> 调整大小错误；似乎有不可移动的`min-width: min-content`

<fieldset> resizes wrong; appears to have unremovable `min-width: min-content`

提问by Rory O'Kane

Problem

问题

I have a <select>where one of its <option>'s text values is very long. I want the <select>to resize so it is never wider than its parent, even if it has to cut off its displayed text. max-width: 100%should do that.

我有一个<select>其中一个<option>文本值很长的地方。我希望<select>调整大小，使其永远不会比其父级宽，即使它必须切断其显示的文本。max-width: 100%应该这样做。

Before resize:

调整大小前：

What I want after resize:

调整大小后我想要什么：

But if you load this jsFiddle exampleand resize the Result panel's width to be smaller than that of the <select>, you can see that the select inside the <fieldset>fails to scale its width down.

但是，如果您加载此 jsFiddle 示例并将 Result 面板的宽度调整为小于 的宽度<select>，您会看到里面的 select<fieldset>无法缩小其宽度。

What I'm actually seeing after resize:

调整大小后我实际看到的内容：

However, the equivalent page with a <div>instead of a <fieldset>does scale properly. You can see that and test your changes more easilyif you have a <fieldset>and a <div>next to each other on one page. And if you delete the surrounding <fieldset>tags, the resizing works. The <fieldset>tag is somehow causing horizontal resizing to break.

但是，使用 a<div>而不是 a<fieldset>的等效页面确实可以正确缩放。如果在一页上有彼此相邻的a和 a，您可以更容易地看到并测试您的更改。如果您删除周围的标签，则调整大小会起作用。该标签在某种程度上导致水平尺寸调整打破。<fieldset><div><fieldset><fieldset>

The <fieldset>acts is as if there is a CSS rule fieldset { min-width: min-content; }. (min-contentmeans, roughly, the smallest width that doesn't cause a child to overflow.) If I replace the <fieldset>with a <div>with min-width: min-content, it looks exactly the same. Yet there is no rule with min-contentin my styles, in the browser default stylesheet, or visible in Firebug's CSS Inspector. I tried to override every style visible on the <fieldset>in Firebug's CSS Inspector and in Firefox's default stylesheet forms.css, but that didn't help. Specifically overriding min-widthand widthdidn't do anything either.

这些<fieldset>行为就好像有一个 CSS 规则fieldset { min-width: min-content; }。（min-content大致意思是不会导致孩子溢出的最小宽度。）如果我<fieldset>用 a<div>替换min-width: min-content，它看起来完全一样。然而，min-content在我的样式、浏览器默认样式表或 Firebug 的 CSS Inspector 中没有规则。我试图覆盖<fieldset>在 Firebug 的 CSS Inspector 和 Firefox 的默认样式表forms.css 中可见的每个样式，但这没有帮助。具体覆盖min-width，width也没有做任何事情。

Code

代码

HTML of the fieldset:

字段集的 HTML：

<fieldset>
    <div class="wrapper">
        <select id="section" name="section">
            <option value="-1"></option>
            <option value="1501" selected="selected">Sphinx of black quartz, judge my vow. The quick brown fox jumps over the lazy dog.</option>
            <option value="1480">Subcontractor</option>
            <option value="3181">Valley</option>
            <option value="3180">Ventura</option>
            <option value="3220">Very Newest Section</option>
            <option value="1481">Visitor</option>
            <option value="3200">N/A</option>
        </select>
    </div>
</fieldset>

My CSS that should be working but isn't:

我的 CSS 应该可以工作但不是：

fieldset {
    /* hide fieldset-specific visual features: */
    margin: 0;
    padding: 0;
    border: none;
}

select {
    max-width: 100%;
}

Resetting the widthproperties to the defaultsdoes nothing:

将width属性重置为默认值没有任何作用：

fieldset {
    width: auto;
    min-width: 0;
    max-width: none;
}

Further CSS in which I try and fail to fix the problem:

我尝试并未能解决问题的进一步 CSS ：

/* try lots of things to fix the width, with no success: */
fieldset {
    display: block;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    text-overflow: clip;
}

div.wrapper {
    width: 100%;
}

select {
    overflow: hidden;
}

More details

更多细节

The problem also occurs in this more comprehensive, more complicated jsFiddle example, which is more similar to the web page I'm actually trying to fix. You can see from that that the <select>is not the problem – an inline-block divalso fails to resize. Though this example is more complicated, I assume that the fix for the simple case above will also fix this more complicated case.

这个问题也出现在这个更全面、更复杂的 jsFiddle 示例中，它更类似于我实际尝试修复的网页。你可以看到这<select>不是问题——内联块div也无法调整大小。虽然这个例子更复杂，但我认为上面简单案例的修复也将修复这个更复杂的案例。

[Edit: see browser support details below.]

[编辑：请参阅下面的浏览器支持详细信息。]

One curious thing about this problem is that if you set div.wrapper { width: 50%; }, the <fieldset>stops resizing itself at the point then the full-size <select>would have hit the edge of the viewport. The resizing happens as if the <select>has width: 100%, even though the <select>looks like it has width: 50%.

关于这个问题的一件奇怪的事情是，如果您设置div.wrapper { width: 50%; }，则<fieldset>在该点停止调整自身大小，然后全尺寸<select>会碰到视口的边缘。调整大小发生，因为如果<select>有width: 100%，即使<select>看起来有width: 50%。

If you give the <select>itself width: 50%, that behavior does not occur; the width is simply correctly set.

如果你给<select>自己width: 50%，这种行为不会发生；宽度设置正确。

I don't understand the reason for that difference. But it may not be relevant.

我不明白这种差异的原因。但它可能不相关。

I also found the very similar question HTML fieldset allows children to expand indefinitely. The asker couldn't find a solution and guesses that there is no solutionapart from removing the <fieldset>. But I'm wondering, if it really is impossible to make the <fieldset>display right, why is that? What in <fieldset>'s specor default CSS(as of this question) causes this behavior? This special behavior is probably be documented somewhere, since multiple browsers work like this.

我还发现了一个非常相似的问题HTML fieldset allowed children to expand in雄性。提问者找不到解决方案，猜测除了删除<fieldset>. 但我想知道，如果真的不可能<fieldset>正确显示，为什么会这样？什么<fieldset>的规范或默认的CSS（如这一问题）导致这种行为？这种特殊行为可能在某处记录在案，因为多个浏览器都是这样工作的。

Background goal and requirements

背景目标和要求

The reason I'm trying to do this is as part of writing mobile styles for an existing page with a big form. The form has multiple sections, and one part of it is wrapped in a <fieldset>. On a smartphone (or if you make your browser window small), the part of the page with the <fieldset>is much wider than the rest of the form. Most of the form constrains its width just fine, but the section with the <fieldset>does not, forcing the user to zoom out or scroll right to see all of that section.

我尝试这样做的原因是作为为具有大表单的现有页面编写移动样式的一部分。表单有多个部分，其中一部分包含在<fieldset>. 在智能手机上（或者如果您使浏览器窗口变小），页面中带有 的部分<fieldset>比表单的其余部分宽得多。大多数表单都很好地限制了其宽度，但带有 的部分<fieldset>没有，迫使用户缩小或向右滚动以查看该部分的所有内容。

I'm wary of simply removing the <fieldset>, as it is generated on many pages in a big app, and I'm not sure what selectors in CSS or JavaScript might depend on it.

我很担心简单地删除<fieldset>，因为它是在大型应用程序的许多页面上生成的，而且我不确定 CSS 或 JavaScript 中的哪些选择器可能依赖于它。

I can use JavaScript if I need to, and a JavaScript solution is better than nothing. But if JavaScript is the only way to do this, I'd be curious to hear an explanation for why this is not possible using only CSS and HTML.

如果需要，我可以使用 JavaScript，JavaScript 解决方案总比没有好。但是，如果 JavaScript 是做到这一点的唯一方法，我很想听听为什么仅使用 CSS 和 HTML 无法做到这一点的解释。

---

---

Edit: browser support

编辑：浏览器支持

On the site, I need to support Internet Explorer 8 and later (we just dropped support for IE7), the latest Firefox, and the latest Chrome. This particular page should also work on iOS and Android smartphones. Slightly degraded but still usable behavior is acceptable for Internet Explorer 8.

在网站上，我需要支持 Internet Explorer 8 及更高版本（我们刚刚放弃了对 IE7 的支持）、最新的 Firefox 和最新的 Chrome。此特定页面也应适用于 iOS 和 Android 智能手机。Internet Explorer 8 可以接受稍微降级但仍然可用的行为。

I retested my broken fieldsetexampleon different browsers. It actually already works in these browsers:

我在不同的浏览器上重新测试了我坏掉的fieldset例子。它实际上已经在这些浏览器中工作了：

• Internet Explorer 8, 9, and 10
• Chrome
• Chrome for Android

• Internet Explorer 8、9 和 10
• 铬合金
• 安卓版 Chrome

It breaks in these browsers:

它在这些浏览器中中断：

• Firefox
• Firefox for Android
• Internet Explorer 7

• 火狐
• 火狐安卓版
• 浏览器 7

Thus, the only browser I care about that the current code breaks in is Firefox (on both desktop and mobile). If the code were fixed so it worked in Firefox without breaking it in any other browsers, that would solve my problem.

因此，我关心当前代码中断的唯一浏览器是 Firefox（在桌面和移动设备上）。如果代码是固定的，因此它可以在 Firefox 中运行而不会在任何其他浏览器中破坏它，那将解决我的问题。

The site HTML template uses Internet Explorer conditional comments to add classes such .ie8and .oldieto the <html>element. You can use those classes in your CSS if you need to work around styling differences in IE. The classes added are the same as in this old version of HTML5 Boilerplate.

该网站的HTML模板使用Internet Explorer条件注释添加类，.ie8并.oldie给<html>元素。如果您需要解决 IE 中的样式差异，您可以在 CSS 中使用这些类。添加的类与旧版 HTML5 Boilerplate 中的类相同。

回答by Jordan Gray

Update (25 Sept 2017)

更新（2017 年 9 月 25 日）

The Firefox bugdescribed below is fixed as of Firefox 53 and the link to this answer has finally been removed from Bootstrap's documentation.

下面描述的Firefox 错误自 Firefox 53 起已修复，此答案的链接最终已从 Bootstrap 的文档中删除。

Also, my sincere apologies to the Mozilla contributors who had to block removing support for -moz-documentpartly due to this answer.

此外，我向 Mozilla 贡献者表示诚挚的歉意，他们不得不阻止移除支持，-moz-document部分原因是这个答案。

The fix

修复

In WebKit and Firefox 53+, you just set min-width: 0;on the fieldset to override the default value of min-content.1

在 WebKit 和 Firefox 53+ 中，您只需min-width: 0;在字段集上设置以覆盖默认值min-content.1

Still, Firefox is a bit… odd when it comes to fieldsets. To make this work in earlier versions, you must change the displayproperty of the fieldset to one of the following values:

尽管如此，Firefox 在字段集方面还是有点……奇怪。要在早期版本中使用此功能，您必须将display字段集的属性更改为以下值之一：

• table-cell(recommended)
• table-column
• table-column-group
• table-footer-group
• table-header-group
• table-row
• table-row-group

• table-cell（受到推崇的）
• table-column
• table-column-group
• table-footer-group
• table-header-group
• table-row
• table-row-group

Of these, I recommend table-cell. Both table-rowand table-row-groupprevent you from changing width, while table-columnand table-column-groupprevent you from changing height.

其中，我推荐table-cell. 双方table-row并table-row-group阻止您更改宽度，而table-column并table-column-group阻止您更改高度。

This will (somewhat reasonably) break rendering in IE. Since only Gecko needs this, you can justifiably use @-moz-document—one of Mozilla's proprietary CSS extensions—to hide it from other browsers:

这将（有些合理地）破坏 IE 中的渲染。由于只有 Gecko 需要这个，你可以合理地使用@-moz-document——Mozilla的专有 CSS 扩展之一——来将它隐藏在其他浏览器中：

@-moz-document url-prefix() {
    fieldset {
        display: table-cell;
    }
}

(Here's a jsFiddle demo.)

（这是一个jsFiddle 演示。）

---

---

That fixes things, but if you're anything like me your reaction was something like…

这可以解决问题，但如果你和我一样，你的反应就像……

What.

什么。

There isa reason, but it's not pretty.

有是有原因的，但它不是漂亮。

The default presentation of the fieldset element is absurd and essentially impossible to specify in CSS. Think about it: the fieldset's border disappears where it's overlapped by a legend element, but the background remains visible! There's no way to reproduce this with any other combination of elements.

fieldset 元素的默认呈现是荒谬的，并且基本上不可能在 CSS 中指定。想一想：字段集的边框在与图例元素重叠的地方消失了，但背景仍然可见！没有办法用任何其他元素组合来重现这一点。

To top it off, implementations are full of concessions to legacy behaviour. One such is that the minimum width of a fieldset is never less than the intrinsic width of its content. WebKit gives you a way to override this behaviour by specifying it in the default stylesheet, but Gecko2 goes a step further and enforces it in the rendering engine.

最重要的是，实现充满了对遗留行为的让步。其中之一是字段集的最小宽度永远不会小于其内容的固有宽度。WebKit 为您提供了一种通过在默认样式表中指定它来覆盖此行为的方法，但 Gecko2 更进一步，并在渲染引擎中强制执行它。

However, internal table elements constitute a special frame typein Gecko. Dimensional constraints for elements with these displayvalues set are calculated in a separate code path, entirely circumventing the enforced minimum width imposed on fieldsets.

但是，内部表格元素在 Gecko 中构成了一种特殊的框架类型。具有这些display值集的元素的尺寸约束在单独的代码路径中计算，完全绕过了强加在字段集上的强制最小宽度。

Again—the bug for thishas been fixed as of Firefox 53, so you do not need this hack if you are only targeting newer versions.

再说一遍——从Firefox 53 开始，这个错误已经得到修复，所以如果你只针对较新的版本，你就不需要这个 hack。

Is using @-moz-documentsafe?

使用@-moz-document安全吗？

For this one issue, yes.@-moz-documentworks as intended in all versions of Firefox up until 53, where this bug is fixed.

对于这一问题，是的。@-moz-document在 Firefox 的所有版本中都能按预期工作，直到 53，此错误已修复。

This is no accident. Due in part to this answer, the bug to limit @-moz-documentto user/UA stylesheetswas made dependent on the underlying fieldset bug being fixed first.

这绝非偶然。部分由于这个答案，限制@-moz-document用户/UA 样式表的错误取决于首先修复的底层字段集错误。

Beyond this, do not use @-moz-documentto target Firefox in your CSS, other resources notwithstanding.3

除此之外，不要使用@-moz-document在你的 CSS 中定位 Firefox，尽管有其他资源。3

---

---

1 Value may be prefixed. According to one reader, this has no effect in Android 4.1.2 Stock Browser and possibly other old versions; I have not had time to verify this.

1 值可以是前缀。据一位读者称，这在 Android 4.1.2 Stock Browser 和其他可能的旧版本中无效；我没有时间验证这一点。

2 All links to the Gecko source in this answer refer to the 5065fdc12408 changeset, committed 29?? July 2013; you may wish to compare notes with the most recent revision from Mozilla Central.

2 此答案中指向 Gecko 源代码的所有链接均指5065fdc12408 变更集，已提交 29?? 2013 年 7 月；您可能希望与Mozilla Central 的最新修订版进行比较。

3 See e.g. SO #953491: Targeting only Firefox with CSSand CSS Tricks: CSS hacks targeting Firefoxfor widely referenced articles on high-profile sites.

3 例如，参见SO #953491：仅使用 CSS和CSS 技巧定位 Firefox：针对 Firefox 的 CSS hacks，以获取在知名网站上被广泛引用的文章。

回答by boars

Safari on iOS issue with selected answer

带有选定答案的 iOS 上的 Safari 问题

I found the answer from Jordan Gray to be particularly helpful. However it didn't seem to solve this issue on Safari iOS for me.

我发现 Jordan Gray 的回答特别有帮助。然而，它似乎并没有为我解决 Safari iOS 上的这个问题。

The issue for me is simply that the fieldset cannot have an auto width if the element within has a max-width as a % width.

对我来说，问题很简单，如果其中的元素将最大宽度作为 % 宽度，则字段集不能具有自动宽度。

Fix for issue

修复问题

Simply setting the fieldset to have a 100% width of it's container seems to get around this issue.

简单地将字段集设置为其容器的 100% 宽度似乎可以解决这个问题。

Example

例子

fieldset {
    min-width: 0; 
    width: 100%; 
}

Please refer to the below for working examples - if you remove the % width off the fieldset or replace it with auto, it will not continue to function.

请参阅下面的工作示例 - 如果您从字段集中删除 % 宽度或将其替换为 auto，它将不会继续运行。

JSFiddle| Codepen

JSFiddle| 代码笔

回答by phdj

I've struggled for many hours with this, and basically, the browser is applying computed styling that you need to override in your CSS. I forget the exact property that is being set on fieldsetelements versus divs (perhaps min-width?).

我为此苦苦挣扎了好几个小时，基本上，浏览器正在应用您需要在 CSS 中覆盖的计算样式。我忘记了在fieldset元素与divs上设置的确切属性（也许是min-width？）。

My best advice would be to change your element to a div, copy the computed styles from your inspector, then change your element back to fieldsetand compare the computed styles to find the culprit.

我最好的建议是将您的元素更改为 a div，从您的检查器复制计算出的样式，然后将您的元素更改回fieldset并比较计算出的样式以找到罪魁祸首。

Hope that helps.

希望有帮助。

Update:Adding display: table-cellhelps in non-Chrome browsers.

更新：display: table-cell在非 Chrome 浏览器中添加帮助。

回答by Trojan

.fake-select { white-space:nowrap; }caused the fieldset to interpret the .fake-selectelement by its original width, rather than its forced width (even when the overflow is hidden).

.fake-select { white-space:nowrap; }导致字段集.fake-select通过其原始宽度而不是其强制宽度来解释元素（即使溢出被隐藏）。

Remove that rule, and change .fake-select's max-width:100%to just width:100%and everything fits. The caveat is that you see all of the content of the fake-select, but I don't think this is all that bad, and it fits horizontally now.

删除该规则，并将.fake-select's更改max-width:100%为 justwidth:100%并且一切都适合。需要注意的是，您看到了 fake-select 的所有内容，但我认为这并没有那么糟糕，现在它可以水平放置。

Update:with the current rules in the following fiddle (which contains only real selects), the fieldset's children are constrained to correct widths. Other than removing rules for .fake-selectand fixing comments (from // commentto /* comment */, I've noted changes in the fiddle's CSS.

更新：根据以下小提琴中的当前规则（仅包含真正的选择），字段集的子项被限制为正确的宽度。除了删除规则.fake-select和修复注释（从// comment到/* comment */，我注意到小提琴的 CSS 中的变化。

I understand your problem better now, and the fiddle reflects some progress. I set default rules for all <select>s, and reserve .xxlargefor those which you know will be wider than 480px (and this only works because you knowthe width of #viewport, and can manually add the class to those too wide. Just requires a little bit of testing)

我现在更了解你的问题了，小提琴反映了一些进步。我为所有<select>s设置了默认规则，并.xxlarge为那些你知道会大于 480px 的人保留（这只是因为你知道的宽度#viewport，并且可以手动将类添加到那些太宽的类中。只需要一点点测试)

Proof

证明