Есть ли способ динамически создавать CSS-сетки для IE? - PullRequest
Новая
       17

Есть ли способ динамически создавать CSS-сетки для IE?

0 голосов
/ 24 июня 2019

Я создаю php-сайт, где я извлекаю контент из базы данных и встраиваю html div в свой вывод на страницу по мере необходимости.Затем я форматирую страницу с использованием CSS-сеток.Этот процесс отлично работает в Chrome, Firefox, Edge и Safari.Я не могу заставить его вести себя правильно в Internet Explorer 11.

Я пытаюсь включить -ms в мой код.По какой-то причине при просмотре в Internet Explorer моя сетка накладывается в первом ряду первого столбца.Я взял свой рабочий код и запустил его с помощью Autoprefixer CSS, который не дал мне ничего полезного.

Образец HTML: 

<div class="main">
<div class="head">Title of grid displayed here</div>
//Inside content I build <div> based on return from db//
<div class="content">
            //the info <div> stopped at the end of the loop//
        <div id="info"></div> 
        <div id="info"></div>
        <div id="info"></div>
        <div id="info"></div>
        <div id="info"></div>
        <div id="info"></div>
</div>
</div>

Образец CSS 

.main {
/*Internet Explorer*/
display: -ms-grid;
-ms-grid-columns:100%;
-ms-grid-rows: auto 20px auto;
/*All other browsers*/
display: grid;
grid-template-columns:100%;
grid-gap: 20px 20px;
margin-bottom: 5%;
grid-template-areas:
"head"
"content";
}

.head {
/*Internet Explorer*/
display: -ms-grid;
-ms-grid-row: 1;
-ms-grid-column: 1fr;
/*All other browsers*/
grid-area: head;
display: grid;
margin: 2% 0 2% 0;
text-align: center;
}

.content {
/*Internet Explorer*/
display: -ms-grid;
-ms-grid-row: 3;
-ms-grid-columns: (1fr)[3];
-ms-grid-column-span: 1;
/*All other browsers*/
 grid-area: content;
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px , 1fr));
 margin-left: 10px;
 margin-right: 10px;
 grid-column-start: 1;
 grid-column-end: 2;
 grid-row-gap: 10px;
 grid-column-gap: 10px;
}

#info {
outline: solid #515151;
}

.info{
 grid-area: info;

}

Выводотлично смотрится в Chrome, Firefox, Safari и даже Edge.Я просто не могу заставить его работать в IE.

...