Edge 44和Grid-template-columns的问题：承袭。

Question

我正在做一个使用CSS-grid的布局，其中的断点部分使用了 grid-template-columns: inherit;. 基本上使用本文介绍的技术。https:/cloudfour.comthinks break-out-with-css-grid-layout。

这在主要的浏览器中都能正常工作，但Edge 44除外，因为在Edge 44中 grid-template-columns: inherit; 似乎破坏了布局。如果我只是简单地手动复制继承值，它就能正常显示。

有谁知道为什么会发生这种情况，以及是否有办法在不手动复制继承值的情况下解决这个问题？

下面是一个简短的代码片段，展示了这个问题。

body {
  display: grid;
  grid-template-columns: [full-start] minmax(2em, 1fr) [main-start] minmax(0px, calc(500px / 2)) [main-right] minmax(0px, calc(500px / 2)) [main-end] minmax(2em, 1fr) [full-end];
}

.breakout {
  background: grey;
  width: 100%;
  grid-column: full;
  display: inherit;
  grid-template-columns: inherit;
}

.content {
  grid-column: main;
}

<body>
  <div class = "breakout">
    <div class = "content">
      <p> This is the content inside the breakout element. It should sit properly within the grid, but for some reason it breaks in Edge 44. </p>
    </div>
  </div>
</body>

EDIT: 看来问题是出在继承的过程中 calc(). 可能是个bug？

Answer 1

我可以在微软Edge 44版本上重现这个问题，经过测试，似乎如果我们使用了 [full/main-start] 与 calc()在Microsoft Edge 44上会出现这个问题。

作为一个变通方法，你可以尝试为grid-template-columns minmax()函数设置一个固定的大小。代码如下。

    body {
        display: grid;
        grid-template-columns: [full-start] minmax(2em, 1fr) [main-start] minmax(0px, 250px) [main-right] minmax(0px, 250px) [main-end] minmax(2em, 1fr) [full-end];
    } 
    .breakout {
        background: grey;
        width: 100%;
        grid-column: full;
        display: inherit;
        grid-template-columns: inherit;
    }

    .content {
        grid-column: main;
    }

然后输出如下

Edge 44和Grid-template-columns的问题：承袭。

问题描述投票：1回答：1

1个回答

最新问题

Edge 44和Grid-template-columns的问题：承袭。

问题描述 投票：1回答：1

1个回答

最新问题

问题描述投票：1回答：1