CSS IE 和 MS Edge 中的网格自动宽度不起作用

Question

有 IE 和 Edge 的特定问题。使用 "CSS grid layout" 和 auto 宽度似乎在 IE 10/11 甚至最新版本的 Edge 中都不起作用。（在 Chrome 和 FireFox 中工作正常。）

.test {
  width 100%;
}

.test #contain {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 50px 10px auto;
  -ms-grid-rows: 50px;
  grid-template-columns: 50px auto;
  grid-template-rows: 50px;
  grid-column-gap: 10px;
}

.test .sec1 {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  background-color: red;
}

.test .sec2 {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
  background-color: red;
}

<div class="test">
  <div id="contain">
    <div class="sec1">1</div>
    <div class="sec2">2</div>
  </div>
</div>

那么是我的错误还是微软又做了蹩脚的东西？

此外，我认为 Edge 应该有最新的 CSS 网格的完整实现，但我想不会，因为我仍然需要使用 -ms.

Answer 1

IE/Edge CSS 网格布局根据旧 specs 工作的问题，其中

auto is equivalent to minmax(min-content, max-content).

并根据新 specs

auto
As a maximum, identical to max-content. As a minimum, represents the largest minimum size (as specified by min-width/min-height) of the grid items occupying the grid track.

在此示例中，您不需要 auto 值，您需要 1fr 来占据所有剩余宽度。顺便说一句，某些样式在您的代码中是多余的。演示：

.test {
  width 100%;
}

.test #contain {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 50px 10px 1fr;
  -ms-grid-rows: 50px;
  grid-template-columns: 50px 1fr;
  grid-template-rows: 50px;
  grid-column-gap: 10px;
}

.test .sec1 {
  /* this is default value for IE/Edge, grid items always stack in first cell for IE/Edge */
  -ms-grid-row: 1;  /* redundant */
  -ms-grid-column: 1;  /* redundant */
  background-color: red;
}

.test .sec2 {
  /* this is default value for IE/Edge, grid items always stack in first cell for IE/Edge */
  -ms-grid-row: 1; /* redundant */
  -ms-grid-column: 3;
  /* all this value will be used by default due to auto-placement of grid items (which is not working in IE/Edge) */
  grid-column-start: 2; /* redundant */
  grid-column-end: 3; /* redundant */
  grid-row-start: 1; /* redundant */
  grid-row-end: 2; /* redundant */
  background-color: red;
}

<div class="test">
  <div id="contain">
    <div class="sec1">1</div>
    <div class="sec2">2</div>
  </div>
</div>

Answer 2

auto 在 IE 中！= auto 在现代浏览器中。

auto 在 IE 中严格等于 minmax(min-content, max-content).

在现代浏览器中 auto 本质上仍然像 minmax(min-content, max-content) 一样，只是它在拉伸时能够超过 max-content 值的大小通过 align-content 和 justify-content 属性。 IE 不允许。 auto 在 IE 中不能超过 max-content 值的大小。

另一个区别是IE中的auto不能在minmax()函数中使用。这是因为IE中的auto = minmax(min-content, max-content)和minmax()函数是不允许相互嵌套的。

现代浏览器允许 auto 在 minmax() 中使用，因为 auto 具有不同的功能，具体取决于它是用作最小值、最大值还是单独使用.

'auto'

As a maximum, identical to max-content. As a minimum, represents the largest minimum size (as specified by min-width/min-height) of the grid items occupying the grid track.

Note: auto track sizes (and only auto track sizes) can be stretched by the align-content and justify-content properties.

source: https://www.w3.org/TR/css-grid-1/#valdef-grid-template-columns-auto

要占用网格中剩余的 space，请改用 1fr。

请参阅本系列文章，了解如何有效地使用 CSS 网格的 IE 实现： https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/

CSS IE 和 MS Edge 中的网格自动宽度不起作用

CSS grid auto width in IE and MS Edge not working

css

internet-explorer-11

css-grid

microsoft-edge