【发布时间】：2019-01-19 18:42:21
【问题描述】：
或者，更一般地说，是否有任何元素无法使用display:grid 设置样式？
考虑：
button,
div {
display: grid;
grid-template-columns: 50px 50px;
}
/* Nevermind these, they're just for a consistent display */
button,
div {
border: 0;
background-color: gray;
color: black;
width: 100px;
text-align: center;
font-family: sans-serif;
font-size: 14px;
padding: 0;
}Button:
<button>
<span>A</span>
<span>B</span>
</button>
<br>
Div:
<div>
<span>A</span>
<span>B</span>
</div>这是 Firefox (61.0.1) 中的结果：
这是 Chrome (68.0.3440.106) 中的结果：
Chrome 似乎不喜欢我尝试在按钮上使用 display:grid。这只是一个错误吗？还是以某种方式有意为之？
【问题讨论】：
-
这是个好问题 :) 明显的解决方法是用
div将按钮中的所有元素包裹起来，但您可能已经知道了。 -
如果你输入
button span {padding: 0;margin: 0;}会发生什么？ -
@Dknacht 同样的结果..
-
你在使用一些重置 css 吗？我的意思是一些css代码来擦除浏览器中的所有默认值？我相信这是由于两个浏览器默认设置之间的一些不一致造成的。
-
@MoshFeu 谢谢！是的，这就是我正在做的。我只是想让我的 html 尽可能精简，多余的 div 非常烦人：D