IE11 中的Flex 容器換行問題:解決方案和解決方法
使用Flex 容器對齊文字元素時,我們發現文字中Chrome 和IE11 中的換行行為有所不同。具體來說,在 IE11 中,Flex 容器內的文字無法換行,導致溢出。
已知錯誤和解決方法
這確實是 IE11 中的已知錯誤。若要解決此問題,需要明確指定 Flex 容器內子元素的寬度。將以下CSS 規則加入您的程式碼應該可以解決換行問題:
.child { width: 100%; }
替代解決方法
替代解決方法包括使用flex-basis: 100 % 或flex: 1 在子元素上。這些選項還強制 IE11 了解並尊重 Flex 容器內區塊級子元素的預期全寬佔用。
範例
.child { flex-basis: 100%; }
說明
IE11 需要明確寬度聲明來辨識子元素應佔據父Flex 容器內的全部可用空間。相較之下,即使沒有明確聲明,Chrome 也會表現出預期的換行行為。
以上是為什麼 IE11 Flex 容器中的文字不換行,如何修復它?的詳細內容。更多資訊請關注PHP中文網其他相關文章!