如何解决grid-template-columns对ie11不起作用?
我正在使用顺风CSS,grid-template-columns
在IE11中不起作用。
如何分离以便它可以在IE11上运行?
grid-template-columns: repeat(2,minmax(0,1fr))
<div
class="mx-15 tb:grid tb:grid-cols-2 tb:gap-x-40 tb:mt-20 tb:mx-40 pc:w-1280 pc:mx-auto pc:mt-0 grid-column"
>
<article class="mb-100">
<p class="mb-10 font-light text-left font-en text-12 text-gray-85">
2020.10.26
</p>
<div
class="text-10 text-gray-85 leading-2.6 text-left font-jp tb:text-11 tb:leading-2.73"
>
<span class="mr-5">#aaaa</span>
<span class="mr-5">#aaaa</span>
<span class="mr-5">#aaa</span>
</div>
</article>
<article class="mb-100">
<p class="mb-10 font-light text-left font-en text-12 text-gray-85">
2020.10.26
</p>
<div
class="text-10 text-gray-85 leading-2.6 text-left font-jp tb:text-11 tb:leading-2.73"
>
<span class="mr-5">#aaaa</span>
<span class="mr-5">#aaaa</span>
<span class="mr-5">#aaa</span>
</div>
</article>
<article class="mb-100">
<p class="mb-10 font-light text-left font-en text-12 text-gray-85">
2020.10.26
</p>
<div
class="text-10 text-gray-85 leading-2.6 text-left font-jp tb:text-11 tb:leading-2.73"
>
<span class="mr-5">#aaaa</span>
<span class="mr-5">#aaaa</span>
<span class="mr-5">#aaa</span>
</div>
</article>
</div>
现在,问题在于此代码在Chrome,Firefox和Opera中运行正常,但是当我在Microsoft Edge或IE 11中打开此页面时,所有网格项在第一个单元格处都相互重叠。
解决方法
Internet Explorer的grid-template-columns
可以与层次关系-ms-grid
兼容。然后,您可以在子样式中设置行和列的比率。这是示例:
.wrapper {
display: -ms-grid;
display: grid;
-ms-grid-columns: 300px 300px 300px;
grid-template-columns: 300px 300px 300px;
}
.box1 {
-ms-grid-row: 1;
-ms-grid-column: 1;
}
.box2 {
-ms-grid-row: 1;
-ms-grid-column: 2;
}
.box3 {
-ms-grid-row: 1;
-ms-grid-column: 3;
}
<div class="wrapper">
<article class="box1">
<p class="mb-10 font-light text-left font-en text-12 text-gray-85">
2020.10.26
</p>
<div class="text-10 text-gray-85 leading-2.6 text-left font-jp tb:text-11 tb:leading-2.73">
<span class="mr-5">#aaaa</span>
<span class="mr-5">#aaaa</span>
<span class="mr-5">#aaa</span>
</div>
</article>
<article class="box2">
<p class="mb-10 font-light text-left font-en text-12 text-gray-85">
2020.10.26
</p>
<div class="text-10 text-gray-85 leading-2.6 text-left font-jp tb:text-11 tb:leading-2.73">
<span class="mr-5">#aaaa</span>
<span class="mr-5">#aaaa</span>
<span class="mr-5">#aaa</span>
</div>
</article>
<article class="box3">
<p class="mb-10 font-light text-left font-en text-12 text-gray-85">
2020.10.26
</p>
<div class="text-10 text-gray-85 leading-2.6 text-left font-jp tb:text-11 tb:leading-2.73">
<span class="mr-5">#aaaa</span>
<span class="mr-5">#aaaa</span>
<span class="mr-5">#aaa</span>
</div>
</article>
</div>
IE中的结果:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。