子项仅在Firefox中脱离内联网格父项

Question

我希望图像居中放置在按钮中，但是在Firefox中会破裂，而在Google Chrome中则可以完美显示。为什么会发生这种情况，如何防止这种情况发生？

代码如下：

button {
    all: unset;
    height: 50px;
    width: 50px;
    display: inline-grid;
    place-items: center;
    background-color: firebrick;
}

button img {
    height: 60%;
    margin: auto;
}

<button><img src="https://upload.wikimedia.org/wikipedia/commons/9/99/Black_square.jpg"></button>

这是 Chrome 中的外观：

在 Firefox 中：

Answer 1

显示：不需要内联网格。 Button是一个块元素，主体中设置的所有内容都将位于按钮的中间

button {
  height: 50px;
  width: 50px;
  background-color: firebrick;
}

button img {
  height: 60%;
  margin: auto;
  display: block;
}

<button><img src="https://upload.wikimedia.org/wikipedia/commons/9/99/Black_square.jpg"></button>