为什么我的没有按预期缩小？它似乎有一个不可移除的 min-width: min-content 问题。

无法按预期缩小; 似乎存在不可移除的 min-width: min-content

问题

我有一个 ，其中一个 的文本值非常长。我希望 缩小到从未宽于其父级，即使它必须截断其显示文本。max-width: 100% 应该可以做到这一点。

预期的结果

实际结果

解决方法

更新 (2017 年 9 月 25 日)

下面描述的 Firefox bug 已在 Firefox 53 中修复，指向此答案的链接也已从 Bootstrap 文档中移除。

另外，对于 Mozilla 贡献者不得不部分由于此答案而阻止删除对 -moz-document 的支持，我谨表最诚挚的歉意。

修复方案

在 WebKit 和 Firefox 53 中，您只需在 fieldset 上设置 min-width: 0; 即可覆盖 min-content 的默认值。¹

不过，在 fieldset 方面，Firefox 有点奇怪。若要在早期版本中使其正常工作，您必须将 fieldset 的 display 属性更改为以下值之一：

• 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 需要这样做，您可以合理地使用 Mozilla 的专有 CSS 扩展之一 @-moz-document 来对其他浏览器隐藏此效果：

@-moz-document url-prefix() {<pre class="brush:php;toolbar:false">fieldset {
    display: table-cell;
}

}

（这是一个 jsFiddle 演示。）

原因

这解决了问题，但如果您和我一样，您的反应可能是……

什么？

它确实有一个原因，但并不好理解。

fieldset 元素的默认呈现很荒唐，基本上无法在 CSS 中指定。想想看：fieldset 的边框在其与 legend 元素重叠的地方消失，但背景仍然可见！没有任何其他元素组合可以重现此效果。

最重要的是，实现充斥着对旧版行为的让步。其中之一是 fieldset 的最小宽度绝不会小于其内容的固有宽度。WebKit 通过在默认样式表中指定来提供一个覆盖此行为的方法，但 Gecko² 更进一步，在渲染引擎中强制执行此行为。

但是，内部表格元素构成了 Gecko 中一种特殊帧类型。计算具有这些显示值设置的元素的尺寸约束在单独的代码路径中，完全绕过了对 fieldset 强制的最小宽度。

再次重申——对于此问题，Firefox 53 已修复错误，因此如果您仅针对较新版本，则不需要此修补程序。

使用 @-moz-document 安全吗？

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

这不是偶然。部分原因是由于此答案，限制 @-moz-document 为用户/UA 样式表的错误被设置为首先依赖于所修复的底层 fieldset 错误。

除此之外，不要在 CSS 中使用 @-moz-document 将 Firefox 作为目标浏览器，尽管有其他资源也如此。³

以上是为什么我的没有按预期缩小？它似乎有一个不可移除的 min-width: min-content 问题。的详细内容。更多信息请关注PHP中文网其他相关文章！