HTML divs, кажется, не совпадают при определенных уровнях масштабирования

Question

Я пытаюсь создать заголовок, который имеет 3 раздела, каждый из которых занимает 1/3 страницы.

.container-header {
            color: white;
            background: #28939D;
            height: 48px;
            padding-top: 20px;
            padding-left: 24px;
}

<div style='width:calc(100% / 3);'>
    <div class='container-header'>
        <svg width='26' height='29' viewBox='0 0 26 29' fill='none' xmlns='http://www.w3.org/2000/svg'>
            <path fill-rule='evenodd' clip-rule='evenodd' d='<code needed to make the icons>' fill='white'/>
        </svg>
        <p class='header-text'></p>
    </div>
</div>

Каждый из 3 имеет одинаковую информацию о размере svg и одинаковый родительский стиль: ширина составляет 33%.

К сожалению, нижний край средней части, по-видимому, выбивает пиксель или два в зависимости от уровня масштабирования, а левая сторона иногда имеет почти белую рамку. Ниже приведены изображения в обычном полностью уменьшенном масштабе, с небольшим увеличением, а затем с максимальным увеличением. HTML становится PDF, и снимки экрана были взяты из представления PDF (не настоящая HTML страница, отображаемая в браузере.)

Полностью уменьшенный

Немного увеличено

Увеличено еще больше

Кто-нибудь видел что-то подобное раньше?

Answer 1

Вы можете использовать flexbox для управления макетом меню, проверьте этот пример:

.navigation {
  width: 100%;
  padding: 0px;
  list-style: none;
  background: deepskyblue;
  display: flex;
  flex-flow: row no-wrap;
  border-radius:5px 5px 0px 0px;
}

.navigation li {
  flex: 1 0;
}

.navigation a {
  text-decoration: none;
  display: block;
  padding: 1em;
  color: white;
}

.navigation a:hover {
  background: #00b7f5;
}

<ul class="navigation">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Products</a></li>
</ul>