Как решить проблему когда браузер неправильно отображает width?

Question

[jango81]

Дал всем псевдоклассам и span height: 2px; но почему то браузер отображает span толще чем псевдоклассы. Как решить? Проблема наверное не в браузере так как при залитии на хостинг и просмотре с телефона (iOS) они остаются такими же не правильными.

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

.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%;
}

Comments

[its2easyy]

лучше использовать border вместо height + background, у бордеров чуть меньше вероятность косяков с толщиной при масштабировании

[Михаил Лялин]

попробуйте уйти от px к em и т.п.

Answer 1

[Ivan Ustûžanin]

ищите просачивающиеся стили, т.к. приведённый код в изоляции работает как положено

Comments

[jango81]

у меня он и тут отображается не правильно)

[Ivan Ustûžanin]

jango81, дробное масштабирование в браузере и/или в операционной системе?

[jango81]

не понял что такое дробное масштабирование

[Ivan Ustûžanin]

jango81, не целое, т.е. не 100%, 200%, 300%

[jango81]

IvanU7n, браузер 100% масштаб, винда 125% менял на 100% не помогло

[Ivan Ustûžanin]

jango81, в общем направление поиска понятно, вероятно нужно перезагрузиться, чтобы браузер подхватил новый масштаб
т.к. приведённый код работает как положено, проблема локальная

[jango81]

IvanU7n, я бы так не переживал если бы на другом устройстве (телефоне) оно нормально отображалось. В любом случае спасибо

[Михаил Р.]

jango81,

я бы так не переживал если бы на другом устройстве (телефоне) оно нормально отображалось.

Особенность конкретного браузера, у меня такие проблемы периодически с малыми элементами svg.

В любом случае спасибо

Жмите соответствующие кнопки под ответом.

[IIIu6ko]

jango81, У меня аналогично на ПК, криво и масштабирование 125%, но на телефоне всё норм. Дело 100% в масштабировании. Я раньше не использовал монитор, на котором масштабирование было, именно из-за этого.