This question already has an answer here:
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>
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?
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

