Браузер неправильно отображает height

Question

Дал всем псевдоклассам и span height: 2px; но почему то браузер отображает span толще чем псевдоклассы. Как решить?

.header__burger {
  position: relative;
  width: 30px;
  height: 30px;
}

.header__burger span::before {
  content: "";
  width: 30px;
  height: 2px;
  background: #000;
  position: absolute;
  left: 0;
  top: 10px;
}

.header__burger span::after {
  content: "";
  width: 30px;
  height: 2px;
  background: #000;
  position: absolute;
  left: 0;
  top: -10px;
}

.header__burger span {
  width: 30px;
  height: 2px;
  background: #000;
  position: absolute;
  left: 0;
  top: 50%;
}

<div class="header__burger">
  <span></span>
</div>

Answer 1

Почти наверняка потому что они субпиксельные.

Если высота блока нечётная, то средняя полоса должна встать между пикселями, а значит она будет отображена иначе.

Если используется масштабирование экрана (на ноутах часто 125% или 150%), то даже при чётной высоте виртуальные пиксели не наложатся ровно на физические и отображение поедет. Используй реальный экранный пиксель чтобы это исправить:

html
  --spx: 1px;
  @media (-webkit-min-device-pixel-ratio:  .09)   { --spx: 10px;          }
  @media (-webkit-min-device-pixel-ratio:  .25)   { --spx: 4px;           }
  @media (-webkit-min-device-pixel-ratio:  .33)   { --spx: 3px;           }
  @media (-webkit-min-device-pixel-ratio:  .5 )   { --spx: 2px;           }
  @media (-webkit-min-device-pixel-ratio:  .66)   { --spx: 1.5px;         }
  @media (-webkit-min-device-pixel-ratio:  .75)   { --spx: 1.333333333px; }
  @media (-webkit-min-device-pixel-ratio:  .79)   { --spx: 1.25px;        }
  @media (-webkit-min-device-pixel-ratio:  .89)   { --spx: 1.111111111px; }
  @media (-webkit-min-device-pixel-ratio: 1   )   { --spx: 1px;           }
  @media (-webkit-min-device-pixel-ratio: 1.25)   { --spx: .8px;          }
  @media (-webkit-min-device-pixel-ratio: 1.5 )   { --spx: 0.666666666px; }
  @media (-webkit-min-device-pixel-ratio: 1.75)   { --spx: 0.571428571px; }
  /* А тут пусть будет нормальный */
  @media (-webkit-min-device-pixel-ratio: 2   )   { --spx: 1px; }

БЛОГ НА HUSL

Браузер неправильно отображает height

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