为了账号安全,请及时绑定邮箱和手机立即绑定

CSS网格布局即使带有前缀也不能在IE11中工作

CSS网格布局即使带有前缀也不能在IE11中工作

杨魅力 2019-07-20 12:58:56
CSS网格布局即使带有前缀也不能在IE11中工作我在网格中使用以下HTML标记。<section class="grid">     <article class="grid-item width-2x height-2x">....</article>     <article class="grid-item">....</article>     <article class="grid-item">....</article>     <article class="grid-item width-2x">....</article>     <article class="grid-item height-2x">....</article>     <article class="grid-item">....</article>     <article class="grid-item">....</article>     <article class="grid-item width-2x height-2x">....</article></section>SCSS代码如下所示:.grid {     display: grid;     grid-template-columns: repeat( 4, 1fr );     grid-gap: 30px;     align-items: start;     .grid-item {         &.height-2x {             grid-row: span 2;         }         &.width-2x {             grid-column: span 2;         }     }}因为我在工作流程中使用自动前缀程序,所以它会自动添加所有相关属性-ms前缀。我可以通过检查元件确认。现在的问题是,这段代码在Chrome、Firefox和Opera中工作得很好,但是当我在MicrosoftEdge或IE11中打开这个页面时,所有的网格项在第一个单元格上都是重叠的。根据本站这些浏览器支持CSS网格布局-ms前缀。我为这个场景创建了一个代码笔。代码笔链接为什么不起作用?.grid {   display: -ms-grid;   display: grid;   -ms-grid-columns: (1fr)[4];   grid-template-columns: repeat(4, 1fr);   -ms-grid-rows: (270px)[4];   grid-template-rows: repeat(4, 270px);   grid-gap: 30px;}.grid .grid-item {   background-color: #000;   color: #fff;   text-align: center;   line-height: 270px;}.grid .grid-item.height-2x {   -ms-grid-row: span 2;   grid-row: span 2;}.grid .grid-item.width-2x {   -ms-grid-column: span 2;   grid-column: span 2;}<section class="grid">   <article class="grid-item width-2x height-2x">....</article>   <article class="grid-item">....</article>   <article class="grid-item">....</article>   <article class="grid-item width-2x">....</article>   <article class="grid-item height-2x">....</article>   <article class="grid-item">....</article>   <article class="grid-item">....</article>   <article class="grid-item width-2x height-2x">....</article></section>
查看完整描述

3 回答

?
繁星淼淼

TA贡献1775条经验 获得超11个赞

这只是试图使可能的解决办法更加明显。

对于IE11及以下版本,您需要在父div中启用网格的旧规范,例如body或类似于这里的“Grid”,如下所示:

.grid-parent{display:-ms-grid;}

然后定义列和行的数量和宽度,例如:

.grid-parent{
  -ms-grid-columns: 1fr 3fr;
  -ms-grid-rows: 4fr;}

最后,您需要显式地告诉浏览器元素(项)应该放在哪里,例如:

.grid-item-1{
  -ms-grid-column: 1;
  -ms-grid-row: 1;}.grid-item-2{
  -ms-grid-column: 2;
  -ms-grid-row: 1;}


查看完整回答
反对 回复 2019-07-20
  • 3 回答
  • 0 关注
  • 2252 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信