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

Question

所以我有一个固定的CSS网格，高度/宽度为100％。

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

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

center ===（绝对值，顶部：50VH，左侧：50VW）

end ===（绝对值，顶部：100VH，左侧：100VW）

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

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

Chrome：

IE11：

Answer 1

您可以在position: absolute;和#cell中删除#cell2。没有这些属性，图像将在IE中很好地显示。但是在这种情况下，中心单元格将在Chrome中消失，因此我们需要添加一个仅在Chrome中有效的css属性：

@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中）均无法按预期工作。

我的解决方案是因为我无法更改项目的transform属性，而我必须使用绝对值，因此为该项目添加了包装并使用了transform：translate。