Is a <button> allowed to have display:grid? [duplicate]

问题

This question already has answers here:

Flexbox not working on button or fieldset elements (2 answers)

Closed last year.

or, more generally, are there any elements that can't be styled with display:grid?

Consider:

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>

Try it on JsFiddle

This is the result in Firefox (61.0.1):

And this is the result in Chrome (68.0.3440.106):

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?

回答1:

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

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

And tracked here:

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

_{(I don't see a progress here. If it fixed, please edit the answer or I will if I remember)}

来源：https://stackoverflow.com/questions/51815477/is-a-button-allowed-to-have-displaygrid