Edge 44 和网格模板列的问题：继承

Question

我正在设计一个布局，该布局使用 CSS-grid，其中 breakout 部分使用 grid-template-columns: inherit;。基本上使用本文中描述的技术：https://cloudfour.com/thinks/breaking-out-with-css-grid-layout/

这在主要浏览器中工作正常，但 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>

编辑：问题似乎源于 calc() 的继承。可能是错误？

Answer 1

我可以在 Microsoft 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 和网格模板列的问题：继承

Issue with Edge 44 and grid-template-columns: inherit

css

cross-browser

css-grid

microsoft-edge