為什麼 `display: flex` 不適用於 `` 元素？

為什麼Fieldset 元素不像Flex 容器

使用display: flex 或display: inline-flex 設定fieldset 元素的樣式可能會讓您摸不著頭腦，因為它的行為與預期不同。它不是充當靈活的容器，而是分別與區塊或內聯塊元素類似。

錯誤或預期行為？

Firefox 和 Chrome 中的此行為（雖然令人驚訝地在 IE 中工作）不是一個錯誤。根據 Bug 984869，按鈕元素是透過特殊處理呈現的，並且可能會忽略諸如顯示之類的 CSS 屬性。這種行為並不是按鈕所獨有的。 fieldset、table 和 del 元素也表現出類似的渲染異常。

解決方案

按照CSS 靈活框佈局中的指定可靠地佈局fieldset 元素的子元素，您需要使用一種解決方法：將子元素包裝在字段集中的div 容器內。這種方法在所有瀏覽器中都能一致地工作，確保在所有情況下都能獲得所需的佈局。

Firefox 46 及更高版本

但是，對於Firefox 用戶來說有個好消息：Firefox 46 及更高版本實現支援Fieldset 元素的Flexbox（請參見錯誤1230207）。這意味著您可以在字段集上使用 display: flex 而無需解決方法。

以上是為什麼 `display: flex` 不適用於 `` 元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！