Question

有IE和Edge特定问题。使用＆＃34; CSS网格布局＆＃34;并且auto宽度似乎在IE 10/11甚至是最新版本的Edge中都不起作用。（适用于Chrome和FireFox。）

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

我的错误是这样，还是微软再次制造蹩脚的东西？

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

Answer 1

IE / Edge CSS网格布局根据旧的specs

工作的问题

auto相当于minmax(min-content, max-content)。

根据新的specs

auto
最大值，与max-content相同。至少表示占据min-width的网格项的最大最小尺寸（由min-height / 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

IE浏览器中的

auto！=现代浏览器中的auto。

IE中的

auto严格等于minmax(min-content, max-content)。

在现代浏览器中，auto仍然基本上与minmax(min-content, max-content)类似，但在{{1}拉伸时超过超过 max-content值的大小}和align-content属性。 IE不允许这样做。 justify-content在IE中不能超过auto值的大小。

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

现代浏览器允许在minmax()内使用auto，因为minmax()具有不同的功能，具体取决于它是用作最小值，最大值还是在其上使用的“{1}}。自己的。


<强>＆＃39;自动＆＃39;

最大值，与max-content相同。至少表示占据网格轨道的网格项的最大最小尺寸（由最小宽度/最小高度指定）。

注意：自动跟踪尺寸（仅限自动跟踪尺寸）可以通过align-content和justify-content属性进行拉伸。

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

要占用网格中的剩余空间，请改为使用auto。

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

IE和MS Edge中的CSS网格自动宽度无法正常工作

2 个答案: