為什麼我的沒有如預期縮小？它似乎有一個不可移除的 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-header-group
• table-row

table-header-group

table-rowtable-header-group

table-rowtable-header-group

table-row

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() {<p><strong></strong>}</p>

（這是一個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中文網其他相關文章！