Question

我正在创建一个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中工作。

Answer 1

我仅在支持Grid的浏览器中使用CSS Grid来解决此问题，在其他情况下，我使用Flexbox。

用于CSS网格布局的Flexbox后备广告

<app-ig-dropdown
       [compInfo]="{guid :'820E04E0-8084-4D9C-A268-D8C0D21E74F6',
                    width:'350px',
                    placeHolder: ' -- Select --',
                    fieldText:'Social Media 1'}"
        formControlName="combo1"
        >
</app-ig-dropdown>
<app-ig-dropdown
        [compInfo]="{guid :'820E04E0-8084-4D9C-A268-D8C0D21E74F6',
                    width:'350px',
                    placeHolder: ' -- Select --',
                    fieldText:'Social Media 2'}"
        formControlName="combo2"
>
</app-ig-dropdown>

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
.grid-container {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid blue;
}
.grid-item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  width: 30%; /* IE11 */
  margin: 1.6%; /* IE11 */
  background: rgb(242, 248, 207);
  border: 4px dashed black;
}
/* This will only activate the Grid in browsers that support it */
@supports (display: grid) {
  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
    justify-content: space-between;
  }
  .grid-item {
    width: 100%;
    background: rgb(243, 242, 242);
    margin: 0;/* We will use grid-gap instead of margin */
  }
}

我认为使用媒体查询可以获得更好的结果，希望对您有所帮助。

有没有一种方法可以为IE动态创建CSS网格？

1 个答案: