为什么css网格在IE和Edge中不起作用？

  • Z时代
  • 2024-01-10
  • 分类：问答

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

我的下一个非常基本的代码：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或边缘网格重叠像这样：

对此的任何想法？

回答：

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

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

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

以上是 为什么css网格在IE和Edge中不起作用？ 的全部内容， 来源链接： utcz.com/qa/267244.html

回到顶部