Блог

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

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

Я создал это с помощью:

 // css code

.node{
  display: inline-block;
  padding: 10px;
  content: "";
  border : 1px solid #afc3c2;
  margin-right: -1px;
}

<!-- html code -->
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
 

Как в Microsoft Edge, так и в Safari эта проблема, похоже, отсутствует. Не могли бы вы сказать нам, какой браузер вы используете?

(работает над macOS Big Sur 11.2.2)