Pourquoi ma disposition de grille CSS ne fonctionne-t-elle pas dans IE11, même avec le préfixe automatique ?

La disposition de la grille CSS ne fonctionne pas dans IE11, même avec des préfixes

Malgré l'utilisation d'un préfixe automatique pour ajouter des préfixes aux propriétés CSS pertinentes, la disposition de la grille CSS semble mal fonctionner dans IE11. Ce problème est dû à la spécification Grid obsolète du navigateur.

Spécification Grid obsolète

IE11 implémente une ancienne version de la spécification Grid, à laquelle manque certaines propriétés clés introduites ultérieurement. versions. Plus précisément, les propriétés suivantes ne sont pas prises en charge par IE11 :

• fonction repeat() pour définir les pistes de la grille
• mot-clé span pour l'étendue de l'élément
• propriété grid-gap pour espacement

Solution

À Pour résoudre ce problème, le code doit être mis à jour pour utiliser la syntaxe et les propriétés correctes pour l'ancienne spécification de grille. Les modifications suivantes sont nécessaires :

1. Remplacez Repeat() par des déclarations de piste explicites

Au lieu d'utiliser la fonction Repeat(), déclarez explicitement les pistes de ligne et de colonne en utilisant des valeurs séparées par des virgules :

.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. Utilisez les propriétés Spanning

Remplacez span par ses formes longues grid-row-span et 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. Supprimer Grid-Gap dans IE11

IE11 ne prend pas en charge la propriété grid-gap. Envisagez plutôt d'utiliser des marges ou un remplissage pour l'espacement :

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

Remarque supplémentaire

IE11 ne prend pas non plus en charge le placement automatique des éléments de la grille. Pour garantir un placement correct, spécifiez explicitement les positions des lignes et des colonnes de la grille pour chaque élément à l'aide des propriétés -ms-grid-row et -ms-grid-column.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!