web-dev-qa-db-fra.com

Disposition de la grille CSS: prise en charge de la zone de grille pour IE11

Quelqu'un peut-il me dire comment faire fonctionner cet exemple dans ie11? J'ai vérifié la documentation et -ms- le préfixe n'a pas aidé

#page {
  display: -ms-grid;
  display: grid;
  width: 100%;
  height: 250px;
  grid-template-areas: "head head" "nav  main" "nav  foot";
  -ms-grid-rows: 50px 1fr 30px;
      grid-template-rows: 50px 1fr 30px;
  -ms-grid-columns: 150px 1fr;
      grid-template-columns: 150px 1fr;
}

#page > header {
  grid-area: head;
  background-color: #8ca0ff;
}

#page > nav {
  grid-area: nav;
  background-color: #ffa08c;
}

#page > main {
  grid-area: main;
  background-color: #ffff64;
}

#page > footer {
  grid-area: foot;
  background-color: #8cffa0;
}

Exemple: https://jsfiddle.net/9bp1ffs1/

cssinternet-explorergrid-layoutcss-grid
11
Pavel

Il y a 2 problèmes spécifiques ici. Premièrement, IE10 et 11 et toutes les versions d'Edge jusqu'à v15 ne prennent pas en charge les zones de grille. Tout code pour ces navigateurs doit utiliser des lignes de grille à la place (ce qui est dommage, car les zones de grille sont plus intuitives pour la plupart). Et deuxièmement, IE11 ne prend pas entièrement en charge la balise HTML principale. Dans ce cas, IE11 ne placera ni ne stylisera correctement une balise principale dans une disposition de grille.

Fourche de travail de votre exemple ici, utilisant des lignes de grille pour les modèles IE/Edge et W3C: https://jsfiddle.net/FilmFiddler/q074gpx8/4/

#page {
  display: -ms-grid;
  display: grid;
  width: 100%;
  height: 250px;
  -ms-grid-rows: 50px 1fr 30px;
  grid-template-rows: 50px 1fr 30px;
  -ms-grid-columns: 150px 1fr;
  grid-template-columns: 150px 1fr;
}
#page > header {
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  -ms-grid-row: 1;
  grid-column: 1/3;
  grid-row: 1;
  background-color: #8ca0ff;
}
#page > nav {
  -ms-grid-column: 1;
  -ms-grid-row: 2;
  -ms-grid-row-span: 2;
  grid-column: 1;
  grid-row: 2/4;
  background-color: #ffa08c;
}
#page #main {
  -ms-grid-column: 2;
  -ms-grid-row: 2;
  grid-column: 2;
  grid-row: 2;
  background-color: #ffff64;
}
#page > footer {
  -ms-grid-column: 2;
  -ms-grid-row: 3;
  grid-column: 2;
  grid-row: 3;
  background-color: #8cffa0;
}

HTML, avec la balise principale remplacée par une div:

<section id="page">
  <header>Header</header>
  <nav>Navigation</nav>
  <div id="main">Main area</div>
  <footer>Footer</footer>
</section>

Généralement, l'ancien modèle de grille CSS utilisé par IE et Edge est assez différent de l'implémentation actuelle du W3C. Outre la nécessité du préfixe -ms, il existe des différences considérables dans les noms de propriété, et en plus de ne pas prendre en charge les zones de grille ou les espaces de grille. De plus, les fonctions telles que fit_content () et repeat () ne sont pas prises en charge, bien que ces dernières aient une implémentation spécifique à Microsoft.

Il existe une référence dans les pages MSDN de l'utilisation des lignes de grille dans l'ancien modèle de grille utilisé par IE/Edge: https://msdn.Microsoft.com/en-us/library/hh673533 (v = vs.85 ) .aspx

Il y a une discussion sur les différences entre les modèles IE/Edge et W3C, y compris les différences de propriétés, ici: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement

15
FilmFiddler