IE11 在网格中居中时忽略项目内容的绝对宽度

Question

所以我有一个固定位置 css-grid height/width:100%.

我希望它的项目不会影响单元格大小，所以我在网格的子项上使用绝对位置。

问题是当我使用 -ms-grid-column-align/-ms-grid-row-align （它与现代浏览器中的 justify-self/align-self 相同） end\center 并没有真正起作用，因为 IE 在定位它们时忽略了元素大小，所以

中心===（绝对值，top:50VH，left:50VW）

结束===（绝对，top:100VH，left:100VW）

你能想出其他方法来固定它的位置吗？我不能使用转换，因为它被用于我无法控制的其他属性。

Fiddle - https://codesandbox.io/s/ie11-grid-bug-vgc6k

Chrome:

IE11:

Answer 1

您可以删除 #cell 和 #cell2 中的 position: absolute;。如果没有属性，图像将在 IE 中显示良好。但是在这种情况下，中心单元格会在Chrome中消失，所以我们需要添加一个css 属性 only works in Chrome:

@supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee))
and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none)) {
    #cell2 { position: absolute; } 
}

经过这些修改后，图片在 IE 和 Chrome 中都能正常显示。

Answer 2

遗憾的是，当项目位置为静态时，IE11 不考虑项目内容大小。

所以任何依赖于它的属性（在 CssGrid 和 flex 中）都不会按预期工作。

由于我无法更改项目的转换属性并且我不得不使用绝对值，所以我的解决方案是为项目添加一个包装器并使用转换：翻译。

IE11 在网格中居中时忽略项目内容的绝对宽度

IE11 ignores absolute item content width when centering in grid

html

css

css-position

internet-explorer-11

css-grid