Почему не применяется display grid к button элементу?

Question

Тут не центрируется

button {
  display: grid;
  align-items: center;
  justify-items: center;
  height: 11vw;
  width: 11vw;
  background-color: tomato;
  border: none;
  padding: 0;
}

button::after,
button::before {
  content: "";
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  height: 2vw;
  width: 2vw;
  background-color: black;
}

<button></button>

А тут центрируется

div {
  display: grid;
  align-items: center;
  justify-items: center;
  height: 11vw;
  width: 11vw;
  background-color: tomato;
  border: none;
}

div::after,
div::before {
  content: "";
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  height: 2vw;
  width: 2vw;
  background-color: black;
}

<div></div>

С абсолютным позиционированием

body {
  display: flex;
}

button {
  position: relative;
  display: grid;
  align-items: center;
  justify-items: center;
  height: 11vw;
  width: 11vw;
  background-color: tomato;
  border: none;
  padding: 0;
}

button::after,
button::before {
  content: "";
  position: absolute;
  height: 2vw;
  width: 2vw;
  background-color: black;
}

div {
  position: relative;
  display: grid;
  align-items: center;
  justify-items: center;
  height: 11vw;
  width: 11vw;
  background-color: lightblue;
  border: none;
}

div::after,
div::before {
  content: "";
  position: absolute;
  height: 2vw;
  width: 2vw;
  background-color: black;
}

<button></button>
<div></div>

С флексами и там и там нормально работает

body {
  display: flex;
}

button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 11vw;
  width: 11vw;
  background-color: tomato;
  border: none;
  padding: 0;
}

button::after,
button::before {
  content: "";
  position: absolute;
  height: 2vw;
  width: 2vw;
  background-color: black;
}

div {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 11vw;
  width: 11vw;
  background-color: lightblue;
  border: none;
}

div::after,
div::before {
  content: "";
  position: absolute;
  height: 2vw;
  width: 2vw;
  background-color: black;
}

<button></button>
<div></div>

В чём дело?

Answer 1

Если я правильно понял, то это баг в хроме.

В Chrome (и Safari 10) fieldset элементы с display: grid не ведут себя как grid-контейнеры. При применении display: grid к button элементу - этот button элемент ведёт себя как grid-контейнер только в Firefox.

БЛОГ НА HUSL

Почему не применяется display grid к button элементу?

Ответы (1 шт):