如何解決 Firefox 中的欄位集大小調整問題？

調整大小問題以及如何解決它

問題：

問題：

當包含元素的寬度減小時，某些瀏覽器（尤其是Firefox）中的元素無法縮小其寬度。這會導致水平滾動條及其父容器的不合適。

根本原因：

預設情況下，字段集應用了「min-content」的最小寬度給他們。這可以覆蓋您透過 CSS 設定的任何最大寬度或寬度規則。

解決方案：

1. 要允許

   正確縮放：

   • WebKit 和Fi. 🎜>
設定min-width: 0;在欄位集上覆寫預設值。

2. Firefox 53 之前：
   • 設定 min-width: 0 ;在欄位集上。

   將欄位集的顯示屬性變更為以下之一：table-cell、table-column、table-column-group、table-footer-group、table-header-group、table -row 或table- row-group。

建議值：

table-cell

瀏覽器相容性：
• 瀏覽器相容性：

最初的問題已在Firefox 53 及更高版本中修復。

使用 @-moz-document 提出的解決方案現已過時，但應該仍然適用於舊版Firefox 版本。

警告：除此特定問題外，請避免在 CSS 中使用 @-moz-document 來定位 Firefox。現在有更好的方法來實現瀏覽器特定的樣式。

以上是如何解決 Firefox 中的欄位集大小調整問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！