為什麼即使使用 Autoprefixer，我的 CSS 網格佈局也無法在 IE11 中運作？

CSS 網格佈局即使有前綴也無法在IE11 中工作

儘管使用自動前綴器向相關CSS 屬性添加前綴，CSSSS網格佈局在IE11 似乎出現故障。出現此問題的原因是瀏覽器的網格規格過時。

過時的網格規範

IE11 實作了舊版的網格規範，缺少稍後介紹的一些關鍵屬性版本。具體來說，IE11不支援以下屬性：

• 用於定義網格軌道的repeat()函數
• 用於項目跨越的span關鍵字
• 用於定義網格軌道的grid-gap屬性間距

解決方案

要解決此問題，應更新程式碼以使用舊網格規範的正確語法和屬性。需要進行以下變更：

1.將repeat() 替換為明確軌道宣告

不要使用repeat() 函數，而是使用逗號分隔值明確宣告行與列軌道：

.grid {
  -ms-grid-columns: 1fr 1fr 1fr 1fr;
  grid-template-columns: repeat(4, 1fr);
  -ms-grid-rows: 270px 270px 270px 270px;
  grid-template-rows: repeat(4, 270px);
}

2.使用Spanning屬性

將span 替換為其簡寫形式grid-row-span 和grid-colum-span：

.grid .grid-item.height-2x {
  -ms-grid-row-span: 2;
  grid-row: span 2;
}
.grid .grid-item.width-2x {
  -ms-grid-column-span: 2;
  grid-column: span 2;
}

3.刪除IE11 中的Grid-Gap

IE11 不支援grid-gap 屬性。考慮使用邊距或填充來代替：

.grid .grid-item {
  margin: 30px;
}

附加說明

IE11 也不支援自動放置網格項。為了確保正確放置，請使用 -ms-grid-row 和 -ms-grid-column 屬性明確指定每個項目的網格行和列位置。

以上是為什麼即使使用 Autoprefixer，我的 CSS 網格佈局也無法在 IE11 中運作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！