是< button>允许显示:网格? [英] Is a <button> allowed to have display:grid?

问题描述

或更笼统地说，有没有任何元素不能用display:grid设置样式?

or, more generally, are there any elements that can't be styled with 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>

在JsFiddle上试用

这是 Firefox (61.0.1)中的结果:

This is the result in Firefox (61.0.1):

这是 Chrome (68.0.3440.106)中的结果:

And this is the result in Chrome (68.0.3440.106):

Chrome似乎不喜欢我尝试在按钮上使用display:grid.这只是一个错误吗?还是出于某种目的?

Chrome seems to dislike that I'm trying to use display:grid on a button. Is this just a bug? Or is it intended somehow?

推荐答案

显然，这是Chrome上的错误，在此处进行了详细说明:

Apparently it's a bug on Chrome which detailed here:

https://github.com/rachelandrew/gridbugs#10-some-html-elements-cant-grid-containers

并在此处跟踪:

https://bugs.chromium.org/p/chromium/issue/detail?id = 375693

_{(我在这里看不到进度.如果已解决，请编辑答案，否则，我会记住的)}

这篇关于是< button>允许显示:网格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！