flexbox align-items: центральный рендеринг по-разному на chrome против firefox - PullRequest
Новая
       40

flexbox align-items: центральный рендеринг по-разному на chrome против firefox

0 голосов
/ 05 августа 2020

Центрируя div внутри другого div с flexbox, я заметил, что firefox и chrome отображают его по-разному.

В моем случае у меня есть 3 div. У каждого есть display:flex и justify-content:center & align-items:center.

On Chrome: Самый внутренний div кажется немного похожим на right, а не точно на center.

На Firefox: Div правильно отображается в центре своего родительского div.

Код для того же самого можно найти здесь: https://codesandbox.io/s/nice-pine-q63b5?file= / src / App. js

Firefox версия: 69.0 (64 бит)

Chrome версия: 84.0.4147.105 (64 бит)

MacOS Catalina: 10.15.6

1 Ответ

2 голосов
/ 05 августа 2020

Это связано с точностью до пикселей. Chrome не может правильно отображаться с позициями с десятичными знаками в пикселях, а Firefox - нет. Поскольку ваш дочерний элемент имеет ширину 7 пикселей, а ваш родительский - 14 пикселей, боковые поля дочернего элемента составляют 3,5 пикселя, но округляются до 4 пикселей. Если вы установите для вашего ребенка значение 6px или 8px или вашего родителя на 15px, он будет исправлен в Chrome.

EDIT: Кажется, в некоторых случаях вы можете принудительно Chrome для вычисления десятичных пикселей, используя десятичные пиксели в ширине элемента. Происходит некоторое округление , и кажется, что вам нужно перепроверить каждый случай, но, очевидно, проценты и относительные единицы (rem, em, vw, vh) более надежны. См. Примеры:

  • Желтый не работает в Chrome.
  • Оранжевый не работает Firefox.
  • Бирюзовый не работает в обоих.
  • Белый, точно работает? 

div {
  width: 13px;
  height: 13px;
  background: black;
  margin: 5px;
  display: flex;
  float: left;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
div:after{
  content: '';
  background: white;
}
div:nth-child(1):after {
  width: 7px;
  height: 7px;
}
div:nth-child(2):after {
  width: 6px;
  height: 6px;
  background: teal;
}
div:nth-child(3):after {
  width: 6.1px;
  height: 6.1px;
  background: orange;
}
div:nth-child(4):after {
  width: 42%;
  height: 42%;
}
div:nth-child(5):after {
  width: 50.6%;
  height: 50.6%;
  background: orange;
}
div:nth-child(6):after {
  width: .43em;
  height: .43em;
  background: orange;
}
div:nth-child(7) {
  width: 12.5px;
  height: 12.5px;
}
div:nth-child(7):after {
  width: 6px;
  height: 6px;
  background: yellow;
}
div:nth-child(8) {
  width: 1.34%;
  height: 12.5px;
}
div:nth-child(8):after {
  width: 5.5px;
  height: 5.5px;
  background: yellow;
}
<div title="pixels if subtraction equals integer works"></div>
<div title="pixels if subtraction equals decimal is bugged"></div>
<div title="if you use decimal pixels in the child bugged in Firefox"></div>
<div title="percentage seems to work"></div>
<div title="decimal percentage might fail in Firefox"></div>
<div title="em also works"></div>
<div title="decimal pixels in the parent is bugged"></div>
<div title="parent's % + child decimal pixels also bugged"></div>
...