css显示网格和IE11 [英] css display grid and IE11
本文介绍了css显示网格和IE11的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我意识到我的网格与IE11无法正常工作。
如何让网格列启动和网格列结束使用IE11？
I realise too late that my grid is not working properly with IE11. how can i make that grid-column-start and grid-column-end working with 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: </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: </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: </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: </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不会进入下一行！？
With the implementation below it almost work using -ms-grid-column and -ms-grid-column-span. but the div does not go to the next row if the column is occupied !?
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
推荐答案
您应该能够使用前缀 -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/
You should be able to use the prefix -ms-grid-column. You can use this along with -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;
}
这篇关于css显示网格和IE11的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
