web-dev-qa-db-fra.com

Éléments dans la grille Css dans IE superposés les uns aux autres

Les éléments de Css Grid in IE 11 se superposent. Tout fonctionne correctement dans Chrome, FF et Safari, mais pas IE 11. 

Chrome:  enter image description here

C'EST À DIRE:  enter image description here

Code:

.content-item__image {
  height: 210px;
  width: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.content-item__description {
  padding: 16px 28px;
}

.content-grid {
  display: grid;
  display: -ms-grid;
  grid-template-columns: 1fr 1fr 1fr;
  -ms-grid-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  -ms-grid-rows: 1fr 1fr;
  grid-gap: 1rem;
}
<div class="content-grid">
  <div class="content-item">
    <div class="content-item__backdrop"></div>
    <div class="content-item__image"></div>
    <div class="content-item__description">Cos’è il Texas holdem</div>
  </div>
  <div class="content-item">
    <div class="content-item__backdrop"></div>
    <div class="content-item__image"></div>
    <div class="content-item__description">Cos’è il Texas holdem</div>
  </div>
  <div class="content-item">
    <div class="content-item__backdrop"></div>
    <div class="content-item__image"></div>
    <div class="content-item__description">Cos’è il Texas holdem</div>
  </div>
  <div class="content-item">
    <div class="content-item__backdrop"></div>
    <div class="content-item__image"></div>
    <div class="content-item__description">Cos’è il Texas holdem</div>
  </div>
  <div class="content-item">
    <div class="content-item__backdrop"></div>
    <div class="content-item__image"></div>
    <div class="content-item__description">Cos’è il Texas holdem</div>
  </div>
  <div class="content-item">
    <div class="content-item__backdrop"></div>
    <div class="content-item__image"></div>
    <div class="content-item__description">Cos’è il Texas holdem</div>
  </div>
</div>

Quel pourrait être le problème et les moyens de le résoudre? Sera reconnaissant pour toute aide.

csscss3internet-explorercss-grid
7
Vladimir Humeniuk

Tout d'abord. Les mauvaises nouvelles sont - cela se passe sur Edge aussi. C'est donc un problème sur IE et sur les navigateurs Edge, ce qui n'est pas satisfaisant, car Edge semble être un navigateur assez moderne (EDIT: MS Edge prend enfin totalement en charge la grille CSS [version 16+ ]). Selon Microsoft documentation , cela devrait fonctionner correctement ... mais cela ne fonctionne pas. J'ai essayé quelques corrections de préfixe -ms, mais ça reste cassé et ça a l'air vraiment mauvais. Il semble que css grid n'ait pas une bonne implémentation sur ces navigateurs. Réfléchissons à la façon dont nous pouvons résoudre ce problème afin que la page ait l'air OK pour les utilisateurs d'IE/Edge.

Explication de base du problème

Les éléments se superposent car dans IE et les éléments de grille Edge sont toujours empilés dans la première cellule. Si vous connaissez le nombre exact d'éléments, vous pouvez facilement le réparer en utilisant l'une des propriétés de la grille css:

.content-item:nth-child(2) {
    -ms-grid-column: 2;
}

.content-item:nth-child(3) {
    -ms-grid-column: 3;
}

et ainsi de suite ... Le problème vient du fait que le contenu est dynamique et que vous ne savez pas combien d'éléments vont apparaître dans l'élément parent de la grille.

Commentaires conditionnels en HTML

J'avais l'habitude d'utiliser des commentaires conditionnels pour servir un fichier CSS spécial uniquement pour le navigateur IE.

<!--[if IE ]>
  <link href="iecss.css" rel="stylesheet" type="text/css">
<![endif]-->

Mais ça ne va pas vous aider plus. Les instructions conditionnelles en HTML sont non prises en charge par Internet Explorer ni Edge depuis IE10. Dommage que cette solution ne couvre que IE9 et les versions antérieures.

La solution de travail! (CSS uniquement)

Une méthode pour résoudre le problème sur les navigateurs Microsoft consiste à utiliser les requêtes @supports ou @media pour identifier le navigateur approprié.

Pour obtenir seulementC'EST-&AGRAVE;-DIREutilisez

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    Grid fixes for IE goes here...
}

Pour obtenir le Edge navigateur uniquement, utilisez

@supports (-ms-ime-align: auto) {
    Grid fixes for Edge goes here...
}

En savoir plus sur la directive @supports - here . Malheureusement, vous ne pouvez pas utiliser @supports pour capturer le IE parce qu'il ne le prend pas en charge - caniuse . Nous sélectionnons la propriété Edge by -ms-ime-align car cette propriété est prise en charge par Edge uniquement, vous pouvez donc l'utiliser en toute sécurité.

J'espère que cela vous aidera. Voici la démo EN COURS .

7
Kamil

Dans votre cas, la grille CSS n'est pas la bonne solution. Flexbox est beaucoup plus court et réactif, il fonctionne dans IE/Edge (avec un préfixe automatique et des ajustements manuels mineurs).

Cependant, il existe une solution pour répartir les éléments de la grille en utilisant uniquement les outils CSS Grid, afin d'éviter la détection de nth-child et @media IE.

Ici est l'explication très détaillée.

En gros, vous devez définir la grille via grid-template, puis attribuer explicitement chaque emplacement d’élément de la grille via grid-area.

L'article précise clairement certains détails, y compris les préfixes de fournisseur que vous devez utiliser.

0
bob-12345