Некорректное отображение html элементов

Question

Некорректное отображение html элементов

Рейтинг: 0Ответов: 0Опубликовано: 15.01.2023

Я делаю burger-меню для моего web-приложения, но при создании характерных для burger-меню полосок у меня появляется проблема. А Проблема заключается в том, что, когда я задаю высоту полосок в em (font-size у всех полосок одинаковый), они, при определённых размерах экрана, отображаются неправильно. Визуально кажется, что они разной высоты, но, если проверить их через инструменты разработчика, окажется, что они абсолютно одинаковы. Я не понимаю почему так. Это у меня монитор бракованный или это проблемы браузера?

Если что, я использую mixin для адаптивного шрифта:

@mixin adaptiv-font($pcSize, $mobSize) {
  $maxWidth: 2560;
  $addSize: $pcSize - $mobSize;
  $maxWidth: $maxWidth - 320;
  font-size: calc(#{$mobSize + px} + #{$addSize} * ((100vw - 320px) / #{$maxWidth}));
}

* {
  @include adaptiv-font(24, 7)
}

Так выглядит меню:

Как вы видите, полоски визуально разные, но на деле одинаковые.

Стили и Разметка:

.nav-burger {
  border: 0.1em solid #000000;
  padding: 0.7em;
}

.nav-burger:active {}

.nav-burger div {
  height: 0.2em;
  width: 2em;
  background-color: #000;
  margin-bottom: 0.34em;
}

.nav-burger div:last-child {
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>

<div class="nav-burger">
  <div></div>
  <div></div>
  <div></div>
</div>

Я пробовал и flexbox gap, но с ним ещё хуже.

html scss

Источник: Stack Overflow на русском

Некорректное отображение html элементов

Ответы