Warum funktioniert mein CSS-Rasterlayout in IE11 nicht, selbst mit Autoprefixer?

CSS-Rasterlayout funktioniert in IE11 nicht, selbst mit Präfixen

Trotz der Verwendung eines automatischen Präfixes zum Hinzufügen von Präfixen zu relevanten CSS-Eigenschaften, CSS-Rasterlayout Scheint im IE11 eine Fehlfunktion zu haben. Dieses Problem tritt aufgrund der veralteten Grid-Spezifikation des Browsers auf.

Veraltete Grid-Spezifikation

IE11 implementiert eine ältere Version der Grid-Spezifikation, der einige später eingeführte Schlüsseleigenschaften fehlen Versionen. Insbesondere werden die folgenden Eigenschaften von IE11 nicht unterstützt:

• repeat()-Funktion zum Definieren von Rasterspuren
• Span-Schlüsselwort für Elementspannen
• grid-gap-Eigenschaft für Abstand

Lösung

Zu Um dieses Problem zu beheben, sollte der Code aktualisiert werden, um die richtige Syntax und die richtigen Eigenschaften für die ältere Grid-Spezifikation zu verwenden. Folgende Änderungen sind notwendig:

1. Ersetzen Sie „repeat()“ durch explizite Track-Deklarationen

Anstatt die Funktion „repeat()“ zu verwenden, deklarieren Sie Zeilen- und Spaltentracks explizit mit durch Kommas getrennten Werten:

.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. Verwenden Sie Spanning-Eigenschaften

Ersetzen Sie span durch seine Langhandformen „grid-row-span“ und „grid-column-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. Grid-Gap in IE11 entfernen

IE11 unterstützt die Grid-Gap-Eigenschaft nicht. Erwägen Sie stattdessen die Verwendung von Rändern oder Polstern für den Abstand:

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

Zusätzlicher Hinweis

IE11 bietet auch keine Unterstützung für die automatische Platzierung von Rasterelementen. Um eine ordnungsgemäße Platzierung sicherzustellen, geben Sie die Rasterzeilen- und -spaltenpositionen für jedes Element mithilfe der Eigenschaften -ms-grid-row und -ms-grid-column explizit an.

Das obige ist der detaillierte Inhalt vonWarum funktioniert mein CSS-Rasterlayout in IE11 nicht, selbst mit Autoprefixer?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!