CSS 網格佈局在IE11 中無法呈現,儘管有前綴
理解問題
IE11 的有限網格規範實現
問題的癥結在於 IE11 的遵守舊版本的網格規範。因此,即使使用 -ms 前綴,所提供的 HTML 和 SCSS 程式碼中使用的多個 CSS 屬性也無法被 IE11 識別。
具體挑戰
- repeat(): IE11 缺乏對grid-template-columns 中的Repeat() 函數的支持,網格模板行。這需要使用顯式的列和行定義。
- span: 舊規範中不存在 grid-column-span 和 grid-row-span 的 span 關鍵字。 IE11 需要使用等效的屬性 grid-column-span 和 grid-row-span。
- grid-gap: IE11 不支援 grid-gap 屬性及其長寫形式。網格項之間的間距需要替代方法,例如邊距。
- 網格項目自動放置: IE11 不支援自動放置網格項目。為了確保正確放置,請為每個網格項目明確定義 -ms-grid-row 和 -ms-grid-column 屬性。
IE11 相容性的修訂代碼:
提供的程式碼必須更新如下才能在 IE11 中運作:以上是為什麼即使有前綴,我的 CSS 網格佈局也無法在 IE11 中呈現?的詳細內容。更多資訊請關注PHP中文網其他相關文章!