2017-12-27 477 views
0

我做一个网格,像这样的结构:为什么css网格在IE和Edge中不起作用?

enter image description here

我的下一个非常基本的代码:https://codepen.io/anon/pen/PEpYoy

.grid-list { 
 
\t padding: 0; 
 
\t display: -ms-grid; 
 
\t display: grid; 
 
\t list-style: none; 
 
\t -ms-grid-columns: 1fr 1fr 1fr 1fr; 
 
\t grid-template-columns: 1fr 1fr 1fr 1fr; 
 
\t grid-auto-rows: 1fr; 
 
\t grid-gap: 0.625rem; 
 
} 
 

 
.grid-list li a { 
 
    background-color: 
 
\t border-width: 1px; 
 
\t border-style: solid; 
 
\t display: -webkit-box; 
 
\t display: -ms-flexbox; 
 
\t display: flex; 
 
\t -webkit-box-orient: vertical; 
 
\t -webkit-box-direction: normal; 
 
\t -ms-flex-direction: column; 
 
\t flex-direction: column; 
 
\t height: 100%; 
 
\t transition: border-color .2s ease-out; 
 
\t padding: 3px; 
 
\t padding: 0.1875rem; 
 
}
<ul class="grid-list"> 
 
\t <li> 
 
\t \t <a href="http://www.google.com/"> 
 
\t \t \t <h3>1</h3> 
 
\t \t </a> 
 
\t </li> 
 
\t <li> 
 
\t \t <a href="http://www.google.com/"> 
 
\t \t \t <h3>2</h3> 
 
\t \t </a> 
 
\t </li> 
 
\t <li> 
 
\t \t <a href="http://www.google.com/"> 
 
\t \t \t <h3>3</h3> 
 
\t \t </a> 
 
\t </li> 
 
\t <li> 
 
\t \t <a href="http://www.google.com/"> 
 
\t \t \t <h3>4</h3> 
 
\t \t </a> 
 
\t </li> 
 
\t <li> 
 
\t \t <a href="http://www.google.com/"> 
 
\t \t \t <h3>5</h3> 
 
\t \t </a> 
 
\t </li> 
 
\t <li> 
 
\t \t <a href="http://www.google.com/"> 
 
\t \t \t <h3>6</h3> 
 
\t \t </a> 
 
\t </li> 
 
\t <li> 
 
\t \t <a href="http://www.google.com/"> 
 
\t \t \t <h3>7</h3> 
 
\t \t </a> 
 
\t </li> 
 
\t <li> 
 
\t \t <a href="http://www.google.com/"> 
 
\t \t \t <h3>8</h3> 
 
\t \t </a> 
 
\t </li> 
 
</ul>

,如果我们看到它在铬/火狐它工作正常,但如果我们打开它在IE或边缘网格重叠像这样:

enter image description here

对此的任何想法?

回答

0

CSS Grid仅部分支持IE v11 and Edge 15。这个结构是高度实验性的,所以谨慎使用。

人们已经找到了使用flex作为后备的方法,但即使这种解决方案对于较老的浏览器也可能是易失性的。 codepen demo

@supports not (display: grid) { 
.grid { 
    display: flex; 
    flex-flow: row wrap; 
    ... 
}