為什麼我的 Flexbox 無法在 Internet Explorer 11 中運行，如何修復？

Flexbox 在IE 中無法運作：原因和解決方法

正如您所遇到的，Flexbox 在Internet Explorer 11 中可能會出現故障。這是由於flex 屬性的解析問題。幸運的是，有幾種解決方法可以解決此問題：

1。利用長手屬性：

不要使用簡寫（例如，「flex: 0 0 35%」），而是將其分解為長手屬性：

flex-grow: 0;
flex-shrink: 0;
flex-basis: 35%;

2.啟用Flex-shrink：

透過將「flex: 0 0 35%」替換為：

flex: 0 1 35%;

3 來確保啟用 Flex-shrink。處理百分比和無單位值：

使用基於flex-basis 的變體，尤其是當您不確定IE11 版本時：

flex: 1 1 0;
flex: 1 1 0px;
flex: 1 1 0%;

4.考慮flex: auto:

使用「flex: auto」（相當於「flex: 1 1 auto”）代替“flex: 1”。這將防止從行彎曲方向切換到列彎曲方向時項目折疊。

5.使用寬度/高度屬性：

作為後備，考慮恢復到傳統的寬度/高度屬性。

6.選擇區塊佈局：

在特定情況下，區塊佈局（即「display: block」）可能是彈性佈局的可行替代方案。

其他提示：

• 要警惕可能將 0px 轉換為 0 的縮小器（不影響 0% 的問題）。

• 請參閱以下資源以獲取更多見解：

  • flexbox 中的圖像行為：https://stackoverflow.com/ q/23051125
  • IE 中的簡寫屬性與長寫屬性： https://stackoverflow.com/q/24549977

以上是為什麼我的 Flexbox 無法在 Internet Explorer 11 中運行，如何修復？的詳細內容。更多資訊請關注PHP中文網其他相關文章！