Css «background-clip: content-box» с «align-items: center» в Chrome - PullRequest
Новая
       3

Css «background-clip: content-box» с «align-items: center» в Chrome

0 голосов
/ 27 мая 2020

Создавая несколько настраиваемых флажков, я заметил различное поведение chrome и firefox. Если я вертикально центрирую элемент внутри гибкого бокса и использую внутри него поле содержимого, содержимое элемента не выравнивается по границе элемента. (Высота flexbox должна быть неравномерной по сравнению с высотой элемента) Firefox показывает это внутри devtools, но отображает его правильно, в то время как Chrome отображает сдвиг.

Является ли содержимое содержимого - box разделенный псевдоэлемент, который центрируется независимо от самого элемента, и почему Firefox делает его правильным в отличие от Chrome? 

.box {
  display: flex;
  align-items: center;
  height: 35px;
}

.box div {
  width: 16px;
  height: 16px;
  background-clip: content-box;
  background-color: black;
  border: 1px solid black;
  padding: 3px;
}
<div class="box">
  <div></div>
</div>
...