2017-12-27 158 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; 
    ... 
} 
相關問題