CSS Grid 正在调整 IE11 中输入元素的大小

Question

我在 IE11 中遇到 CSS Grid 的问题。 （是的，震惊吧？）

我有一个 2 列的网格。第一列是表单的标签，第二列是 <input> 和 <select> 元素。

输入元素都有一个 size 属性来控制它们的长度。使所有输入具有相同宽度的现代外观与我们软件其余部分的外观不符。

这在 Chrome 中都有效，但在 IE11 中，输入和选择元素都被强制为相同的宽度。

这是它的外观。左边是 Chrome，右边是 IE11。

这是一个例子：

#testParms {
  display: -ms-grid;
  display: grid;
  justify-items: start;
  align-items: center;
  -ms-grid-columns: max-content;
  grid-auto-columns: max-content;
  grid-template-areas: "a a";
}

#testParms .labelDiv {
  -ms-grid-column: 1;
}

#testParms> :not(labelDiv) {
  -ms-grid-column: 2;
}

.row1 {
  -ms-grid-row: 1;
}

.row2 {
  -ms-grid-row: 2;
}

.row3 {
  -ms-grid-row: 3;
}

<div id="testParms">
  <div class="labelDiv row1"><label>Label 1</label></div>
  <input class="row1" type="text" size="20" />
  <div class="labelDiv row2"><label>Label 2</label></div>
  <input class="row2" type="text" size="2" />
  <div class="labelDiv row3"><label>Label 3</label></div>
  <select class="row3">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

请注意，标签周围的 labelDiv div 用于解决 IE11 中网格的另一个问题。如果我只是自己放置标签，它们似乎忽略了-ms-grid-row 样式，都转到第1行。

我知道我可以用一张桌子轻松地做到这一点，但我试图避免走这条路。

Answer 1

容器中有justify-items: start。这适用于现代浏览器（包括 Chrome）。但请注意，IE11 没有前缀。

那是因为，据我所知，它不存在。因此，justify-items: start 无法被 IE11 识别。

但是，网格项级别确实存在这样的功能。将此添加到您的代码中：

#testParms > :not(labelDiv) {
  -ms-grid-column: 2;
  grid-column: 2;
  -ms-grid-column-align: start; /* NEW */
}

这相当于justify-self: start，如果您愿意，您也可以将其添加到项目中。但是您不需要这样做，因为它已经被容器上的justify-items 覆盖了。