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

Question

我在 IE11 中使用 CSS 网格时遇到问题。（是的，令人震惊吧？）

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

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

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

这是它的样子。 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 行。

我知道我可以用 table 轻松做到这一点，但我正在努力避免走那条路。

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 覆盖了。

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

CSS Grid is resizing input elements in IE11

html

css

internet-explorer-11

css-grid