1. 首页
  2. 问题
  3. 调整大小错误；似乎有不可移除的“最小宽度：最小内容”
小编典典

调整大小错误；似乎有不可移除的“最小宽度：最小内容”

all

问题

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

调整大小之前：

调整大小之前的页面，显示整个 <code>select</code>

调整大小后我想要什么：

调整大小后我想要的页面， <code>select</code> 剪切其内容

但是，如果您 加载这个 jsFiddle 示例 并将 Result
面板的宽度调整为小于 的宽度<select>，您可以看到其中的选择<fieldset>无法缩小其宽度。

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

调整大小后我的当前页面，带有滚动条

但是，使用 a而不是
a的等效页面<div>``<fieldset>确实可以正确缩放。如果您在一个页面上有a和
a并排放置，您可以更轻松地看到这一点并
测试您的更改
。如果你删除周围的标签，调整大小就可以了。该标签以某种方式导致水平调整大小中断。<fieldset>``<div><fieldset><fieldset>

<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没有做任何事情。

代码

字段集的 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>

我的 CSS 应该可以工作但没有：

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

select {
    max-width: 100%;
}

width将属性重置为默认值不会执行任何操作：

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

我尝试并未能解决问题的进一步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;
}

更多细节

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

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

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

使用 50% 宽度的包装 div 调整大小后

如果您给<select>本身width: 50%，则不会发生该行为；宽度设置正确。

使用 50% 宽度选择调整大小后

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

我还发现了非常相似的问题。提问者无法找到解决方案，并猜测除了删除.
之外没有其他解决方案<fieldset>。但我想知道，如果真的无法<fieldset>正确显示，那是为什么呢？什么在<fieldset>规范或默认
CSS （截至这个问题）导致这种行为？这种特殊行为可能记录在某处，因为多个浏览器都是这样工作的。

背景目标和要求

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

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

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

编辑：浏览器支持

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

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

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

它在这些浏览器中中断：

  • Firefox
  • Firefox for Android
  • Internet Explorer 7

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

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


阅读 65

收藏
2022-06-10

共1个答案

小编典典

更新（2017 年 9 月 25 日）

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

此外，我向 Mozilla 贡献者表示诚挚的歉意，他们不得不阻止-moz-document部分由于这个答案而删除对的支持。

修复

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

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

  • table-cell （推荐的）
  • table-column
  • table-column-group
  • table-footer-group
  • table-header-group
  • table-row
  • table-row-group

其中，我推荐table-cell. 两者都table-row阻止table-row-group你改变宽度，同时table- column阻止table-column-group你改变高度。

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

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

（这是一个 jsFiddle 演示。）

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

什么。

有 一个 原因，但它并不漂亮。

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

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

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

同样——这个问题的错误已经在
Firefox 53 中得到修复，所以如果你只针对较新的版本，你不需要这个 hack。

使用@-moz-document安全吗？

对于这一问题，是的。 @-moz-document在 Firefox 53 之前的所有版本中都可以正常工作，该错误已修复。

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

除此之外， 不要@-moz-document在你的 CSS 中使用 Firefox 为目标，尽管有其他资源。鲁

鹿值可以加前缀。据一位读者说，这对 Android 4.1.2 Stock Browser 和可能的其他旧版本没有影响；我没有时间验证这一点。

俘虏所有指向 Gecko 源的链接都参考了这个答案中的5065fdc12408 变更集，提交于 29 岬検。 2013 年 7 月；您可能希望将注释与Mozilla Central
的最新版本进行比较。

鲁 参见例如 SO #953491: Targeting only Firefox with
CSS and CSS Tricks：针对 Firefox 的
CSS hacks
，用于在知名网站上广泛引用的文章。

2022-06-10