CSS Grid 样式按钮的 Chrome 问题[重复]答案

【问题标题】：Chrome issues with CSS Grid styled buttons [duplicate]CSS Grid 样式按钮的 Chrome 问题[重复]
【发布时间】：2020-04-17 11:33:53
【问题描述】：

我一直在努力让 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

它的行为不符合预期。将标签从 'button' 更改为 'div' 使其在 Chrome 上正常工作：

Grid layout with div element

当然，我将大纲设置为 0 等等。 Firefox 似乎都正确显示。

由于使用带有 onClick 属性的 div 不是一个好的解决方案，我可以做些什么来解决这个问题？

【问题讨论】：

标签： html css reactjs grid

【解决方案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>

【讨论】：

是的，它有效，感谢您的解决方案，但这似乎不是一个奇怪的行为吗？
我看过类似你的帖子，其中这些网格按钮在 Firefox 上可以正常工作，但在 Chrome 上却不行。有人说这是一个错误。