css显示网格和IE11

Question

我意识到我的网格与IE11无法正常工作。如何让网格列启动和网格列结束与IE11一起工作？

https://codepen.io/matoeil/pen/OzNmXW

> <div class="field-items"><div class="entity entity-paragraphs-item
> paragraphs-item-bloc-de-type-titre column_start_1 column_end_7"><div
> class="" about="" typeof="">   <div class="content">
>     <div class="field field-name-field-p-titre-titre field-type-text-long field-label-hidden"><div class="field-items"><div
> class="field-item even"><p>Attractivité</p></div></div></div><div
> class="field field-name-field-p-titre-background-image
> field-type-image field-label-hidden"><div class="field-items"><div
> class="field-item even"><img typeof="foaf:Image"
> src="https://edgeforscholars.org/wp-content/uploads/2017/11/trouble.jpg"
> alt="" width="480" height="360"></div></div></div>  </div> </div>
> </div><div class="bloc-lien-item entity entity-paragraphs-item
> paragraphs-item-bloc-lien column_start_7 column_end_10"> <!--<link
> href="paragraphs-block-lien.css" rel="stylesheet">-->
> 
>   <a href="plien1">
> 
>   <div class="" about="" typeof="">
>     <div class="bg" style=""></div>
> 
>      <!-- <div class="overflow" style="display: none; left: 0px; top: 100%;">-->
>       <div class="overflow">
>         <div class="field field-name-field-texte-au-survol field-type-text-long field-label-hidden"><div class="field-items"><div
> class="field-item
> even"><p>blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla</p></div></div></div>
> </div>
> 
>     <div class="content">
>       <div class="field field-name-field-titre field-type-text-long field-label-above"><div class="field-label">Titre:&nbsp;</div><div
> class="field-items"><div class="field-item even"><p>Académie
> d'excellence</p></div></div></div>    </div>   </div>
> 
>   </a>
> 
> </div><div class="bloc-lien-item entity entity-paragraphs-item
> paragraphs-item-bloc-lien column_start_10 column_end_13"> <!--<link
> href="paragraphs-block-lien.css" rel="stylesheet">-->
> 
>   <a href="eee">
> 
>   <div class="" about="" typeof="">
>     <div class="bg" style=")"></div>
> 
>      <!-- <div class="overflow" style="display: none; left: 0px; top: 100%;">-->
>       <div class="overflow">
>         <div class="field field-name-field-texte-au-survol field-type-text-long field-label-hidden"><div class="field-items"><div
> class="field-item even"><p>Le Carnets des recherches
> d'A*midex</p></div></div></div>      </div>
> 
>     <div class="content">
>       <div class="field field-name-field-titre field-type-text-long field-label-above"><div class="field-label">Titre:&nbsp;</div><div
> class="field-items"><div class="field-item even"><p>Le Carnets des
> recherches d'A*midex</p></div></div></div>    </div>   </div>
> 
>   </a>
> 
> </div><div class="entity entity-paragraphs-item
> paragraphs-item-block-texte column_start_1 column_end_4"><div class=""
> about="" typeof="">   <div class="content">
>     <div class="field field-name-field-texte field-type-text-long field-label-hidden"><div class="field-items"><div class="field-item
> even"><p>DESCRIPTION</p><p><strong>Postremo ad id indignitatis
> </strong>est ventum, ut cum peregrinArdeo, mihi credite, Patres
> conscripti (id quod vosmet de me existimatis et facitis ipsi)
> incredibili quodam amore patriae, qui me amor et subvenire olim
> impendentibus periculis maximis cum dimicatione capitis, et
> rursum,</p></div></div></div>  </div> </div> </div><div
> class="bloc-lien-item entity entity-paragraphs-item
> paragraphs-item-bloc-lien column_start_7 column_end_10"> <!--<link
> href="paragraphs-block-lien.css" rel="stylesheet">-->
> 
> 
>   <div class="" about="" typeof="">
>     <div class="bg" style="background-image: url(http://amidex-dev.univ-amu.fr/sites/amidex-dev.univ-amu.fr/files/16.jpg)"></div>
> 
>      <!-- <div class="overflow" style="display: none; left: 0px; top: 100%;">-->
>       <div class="overflow">
>         <div class="field field-name-field-texte-au-survol field-type-text-long field-label-hidden"><div class="field-items"><div
> class="field-item even"><p>ut iam cum utroque vestrum loquar, sic
> habetote.</p></div></div></div>      </div>
> 
>     <div class="content">
>       <div class="field field-name-field-titre field-type-text-long field-label-above"><div class="field-label">Titre:&nbsp;</div><div
> class="field-items"><div class="field-item even"><p>Le Carnets des
> recherche d'A*midex</p></div></div></div>    </div>   </div>
> 
> 
> </div><div class="bloc-lien-item entity entity-paragraphs-item
> paragraphs-item-bloc-lien column_start_10 column_end_13"> <!--<link
> href="paragraphs-block-lien.css" rel="stylesheet">-->
> 
>   <a href="lien6">
> 
>   <div class="" about="" typeof="">
>     <div class="bg" style="background-image: url(http://amidex-dev.univ-amu.fr/)"></div>
> 
>      <!-- <div class="overflow" style="display: none; left: 0px; top: 100%;">-->
>       <div class="overflow">
>         <div class="field field-name-field-texte-au-survol field-type-text-long field-label-hidden"><div class="field-items"><div
> class="field-item even"><p>formidatam haut ita dudum alimentorum
> inopiam pellerentur ab urbe praecipites, sectatoribus disciplinarum
> liberalium inpendio paucis sine respiratione ulla extrusis, tenerentur
> minimarum</p></div></div></div>      </div>
> 
>     <div class="content">
>       <div class="field field-name-field-titre field-type-text-long field-label-above"><div class="field-label">Titre:&nbsp;</div><div
> class="field-items"><div class="field-item even"><p>Prohets
> lAuréats</p></div></div></div>    </div>   </div>
> 
>   </a>
> 
> </div><div class="entity entity-paragraphs-item
> paragraphs-item-block-texte column_start_1 column_end_4"><div class=""
> about="" typeof="">   <div class="content">
>     <div class="field field-name-field-texte field-type-text-long field-label-hidden"><div class="field-items"><div class="field-item
> even"><p>Quam ob rem cave Catoni anteponas ne istum quidem ipsum, quem
> Apollo, ut ais, sapientissimum iudicavit; huius enim facta, illius
> dicta laudantur. De me autem, ut iam cum utroque vestrum loquar, sic
> habetote.</p></div></div></div>  </div> </div> </div></div>

和css：

.field-items {
    display: grid;
    grid-template-columns: 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33%;
}

.field-items > .entity-paragraphs-item{
   border:1px solid red;
}


/*    ----------    display:grid  -----------------   */
.column_start_1{
  -ms-colu
  grid-column-start: 1;
}

.column_start_2{
  grid-column-start: 2;
}
.column_start_3{
  grid-column-start: 3;
}
.column_start_4{
  grid-column-start: 4;
}
.column_start_5{
  grid-column-start: 5;
}
.column_start_6{
  grid-column-start: 6;
}
.column_start_7{
  grid-column-start: 7;
}.column_start_8{
   grid-column-start: 8;
 }
.column_start_9{
  grid-column-start: 9;
}
.column_start_10{
  grid-column-start: 10;
}
.column_start_11{
  grid-column-start: 11;
}
.column_start_12{
  grid-column-start: 12;
}

/**/

.column_end_1{
  grid-column-end: 1;
}

.column_end_2{
  grid-column-end: 2;
}
.column_end_3{
  grid-column-end: 3;
}
.column_end_4{
  grid-column-end: 4;
}
.column_end_5{
  grid-column-end: 5;
}
.column_end_6{
  grid-column-end: 6;
}
.column_end_7{
  grid-column-end: 7;
}.column_end_8{
   grid-column-end: 8;
 }
.column_end_9{
  grid-column-end: 9;
}
.column_end_10{
  grid-column-end: 10;
}
.column_end_11{
  grid-column-end: 11;
}
.column_end_12{
  grid-column-end: 12;
}
.column_end_13{
  grid-column-end: 13;
}

编辑：

通过下面的实现，它几乎可以使用-ms-grid-column和-ms-grid-column-span。但如果列被占用，则div不会进入下一行！

https://codepen.io/matoeil/pen/OzNmXW

    .field-items {
     display: -ms-grid;
  display:grid;
  /* grille de 12*/

 -ms-grid-columns: 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33%;
  grid-template-columns: 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33%;
}

.field-items > .entity-paragraphs-item{
   border:1px solid red;
}


/*    ----------    display:grid  -----------------   */
.column_start_1{
  -ms-grid-column: 1;
  grid-column-start: 1;
}

.column_start_2{
  -ms-grid-column: 2;
  grid-column-start: 2;
}
.column_start_3{
  -ms-grid-column: 3;
  grid-column-start: 3;
}
.column_start_4{
  -ms-grid-column: 4;
  grid-column-start: 4;
}
.column_start_5{
  -ms-grid-column: 5;
  grid-column-start: 5;
}
.column_start_6{
  -ms-grid-column: 6;
  grid-column-start: 6;
}
.column_start_7{
  -ms-grid-column: 7;
  grid-column-start: 7;

}.column_start_8{
   -ms-grid-column: 8;
   grid-column-start: 8;
 }
.column_start_9{
  -ms-grid-column: 9;
  grid-column-start: 9;
}
.column_start_10{
  -ms-grid-column: 10;
  grid-column-start: 10;
}
.column_start_11{
  -ms-grid-column: 11;
  grid-column-start: 11;
}
.column_start_12{
  -ms-grid-column: 12;
  grid-column-start: 12;
}

/**/

.column_end_1{
  -ms-grid-column-span: 1;
  grid-column-end: 1;
}

.column_end_2{
  -ms-grid-column-span: 2;
  grid-column-end: 2;
}
.column_end_3{
  -ms-grid-column-span: 3;
  grid-column-end: 3;
}
.column_end_4{
  -ms-grid-column-span: 4;
  grid-column-end: 4;
}
.column_end_5{
  -ms-grid-column-span: 5;
  grid-column-end: 5;
}
.column_end_6{
  -ms-grid-column-span: 6;
  grid-column-end: 6;
}
.column_end_7{
  -ms-grid-column-span: 7;
  grid-column-end: 7;

}.column_end_8{
   -ms-grid-column-span: 8;
   grid-column-end: 8;
 }
.column_end_9{
  -ms-grid-column-span: 9;
  grid-column-end: 9;
}
.column_end_10{
  -ms-grid-column-span: 10;
  grid-column-end: 10;
}
.column_end_11{
  -ms-grid-column-span: 11;
  grid-column-end: 11;
}
.column_end_12{
  -ms-grid-column-span: 12;
  grid-column-end: 12;
}
.column_end_13{
  -ms-grid-column-span: 13;
  grid-column-end: 13;
}

最后编辑：https://codepen.io/anon/pen/jYqLem

Answer 1

你应该能够使用前缀-ms-grid-column。你可以和-ms-grid-column-span一起使用它。 https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/

.field.field-name-field-texte-au-survol.field-type-text-long.field-label
 hidden {
      word-wrap: break-word;
 }