Chrome与CSS网格样式按钮有关的问题[重复]

Question

此问题已经在这里有了答案：

Flexbox not working on button or fieldset elements（2个答案）

Is a <button> allowed to have display:grid? [duplicate]（1个答案）

关闭昨天。

我一直在努力使CSS Grid在Chromium上的按钮上起作用。它可以在Firefox上正常工作，但在Chromium上出现了一些错误。将显示网格，好像没有定义第二列。

这是基本代码：

<button className="container">
   <div className="header"></div>
   <div className="child"></div>
   <div className="child"></div>
   <div className="child"></div>
   <div className="child"></div>
</button>

这是基本的CSS代码：

.container {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: 2.5rem repeat(3, 1fr);
   gap: 0.5rem;
}

.header {
   grid-row: 1 / 1;
   grid-column: 1 / -1;
}

将此代码应用于按钮将得到以下结果：

Grid layout with button element

它的行为不符合预期。将标签从“按钮”更改为“ div”可以使其在Chrome上正常运行：

Grid layout with div element

当然，我将outline设置为0以及所有其他内容。 Firefox似乎可以正确显示两者。

由于将div与onClick属性一起使用不是一个好的解决方案，我该怎么做才能解决此问题？

Answer 1

怎么样？

<button>
   <div className="container">
       <div className="header"></div>
       <div className="child"></div>
       <div className="child"></div>
       <div className="child"></div>
       <div className="child"></div>
   </div>
</button>