HTML / CSS разметка: нерегулярные, асимметричные линии, нарисованные блоками DIV на мониторе HiPPI

Question

TLDR: одинаковые линии, нарисованные с помощью элемента div, выглядят по-разному в разных масштабах и размерах окна браузера. Вот пример: imgur , jsfiddle .

Я нарисовал несколько горизонтальных, вертикальных и диагональных линий, используя блоки DIV. При разных размерах окна браузера, разном масштабе, разном содержании над и под нарисованными блоками эти блоки (одинаковой толщины) выглядят по-разному (некоторые тоньше, другие шире). И наоборот, блоки с различной толщиной могут выглядеть одинаково в некоторые моменты.

Эти картинки показывают, как часть моей схемы выглядит в различных ситуациях.

На мониторе с нормальной плотностью пикселей и с масштабом системы = 100% эта проблема менее заметно или вообще не проявляет себя.

Ранее я видел подобную проблему, когда добавлял узкие (1-2px) div элементы в качестве горизонтальных разделителей. Некоторые из них иногда исчезали (они были невидимы), когда другие вели себя как обычно на одной странице, если все они были видны, некоторые из них были толще других. Это поведение для каждого элемента меняется, даже когда я открываю / закрываю панель инструментов разработчика Chrome или перетаскиваю угол окна браузера.

Я пытался заменить div строки элементами svg, но они также показались странными поведение.

Могу ли я сделать так, чтобы размеры всех элементов были одинаковыми? Я не хотел бы заменять каждый такой элемент растровым изображением.

Аналогичная проблема была описана в этом (не решенном) вопросе (если вы не видите проблему, просто увеличьте масштаб окно результатов в jsfiddle.

Я не могу уловить проблему на других сайтах, например, в Википедии, все горизонтальные линии (под элементами h2, левые разделители меню) выглядят одинаково в любом масштабе. горизонтальные разделители комментариев (узкие серые линии между комментариями) также отлично выглядят , 100 и 110%. Я заметил странную особенность. Если я использую border для рисования линий вместо background-color, то эти линии выглядят намного лучше. Этот метод используется на сайтах stackoverflow и wikipedia (Wiki также использует png для левое меню).

Это минимальный воспроизводимый пример, встроенный в фрагменты стека:

.line {
  background-color: pink;
  /*  border-bottom: 1px solid pink; */
  margin: 20px auto;
  width: 80%;
  height: 1px;
}

<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>

Answer 1

Это то, как разные браузеры решают для дробей при разных размерах увеличения. Вы не можете иметь часть пикселя на вашем экране.

Например, , скажем, у вас есть три div, сложенные друг на друга, каждый высотой 2px. Увеличьте масштаб до 120%, и теперь каждый div будет иметь высоту 2.2px. Поскольку браузер на самом деле не может отобразить это, он может округлить первый максимум div до 2px. Второй div может иметь вершину 2px, а также быть 2px в высоту.

Однако третий div технически должен быть 4.4px от вершины, но его низ должен быть 6.6px сверху. Если браузер округляет до ближайшего целого числа, вы можете увидеть, как он может вычислить верхнюю часть третьего div в 4px и нижнюю в 7px, задав ему высоту 3px вместо 2px.

Я не говорю, что это именно то, что происходит - каждый браузер использует немного разные вычисления, когда дело доходит до рисования - но, надеюсь, это поможет проиллюстрировать это. Похоже, вам больше повезло с border, так что это может быть вашим лучшим подходом.

Вот похожий вопрос