渲染并不总是相同的

Question

我可能会像素一样疯狂，但是当我在前端设计工作时，我觉得事情是准确的。 假设我在容器元素中有3个正方形，具有完全相同的HTML标记：

<div class="page">
    <div class="active"></div>
</div>

他们都有相同的风格。中间的一个与其他中间不完全相同。它错过了侧面的一些填充像素。

有人可以告诉我为什么吗？有没有办法让它发挥作用？ 我在Chrome上遇到了问题（上一版本）。在Firefox上，它们都不相同。这是一个耻辱，但它只能在IE11上按预期工作。

代码（JSFiddle）：

body {
  background-color: #222;
}

.navigator {
  position: absolute;
  bottom: 20px;
}

.page {
  border: 1px solid #3cbeff;
  box-sizing: border-box;
  display: inline-block;
  height: 15px;
  margin: 5px;
  width: 15px;
  padding: 2px;
}

.page>div {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.page>div.active {
  animation-name: active;
  animation-direction: alternate;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  height: 100%;
  opacity: 1;
}

@keyframes active {
  from {
    background-color: #3cbeff;
  }
  to {
    background-color: white;
  }
}

<div class="navigator">
  <div class="page">
    <div class="active"></div>
  </div>
  <div class="page">
    <div class="active"></div>
  </div>
  <div class="page">
    <div class="active"></div>
  </div>
</div>

这是我在屏幕上看到的内容。对于Chrome和Firefox：

使用@KarelIG解决方案（JSFiddle）：

body {
  background-color: #222;
}

.navigator {
  position: absolute;
  bottom: 20px;
}

.page {
  border: 1px solid #3cbeff;
  display: inline-block;
  height: 15px;
  margin: 5px;
  width: 15px;
  padding: 0.2em;
}

.page>div {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.page>div.active {
  animation-name: active;
  animation-direction: alternate;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  height: 100%;
  opacity: 1;
}

@keyframes active {
  from {
    background-color: #3cbeff;
  }
  to {
    background-color: white;
  }
}

<div class="navigator">
  <div class="page">
    <div class="active"></div>
  </div>
  <div class="page">
    <div class="active"></div>
  </div>
  <div class="page">
    <div class="active"></div>
  </div>
</div>

我明白了：

对我而言，第一个广场与其他广场略有不同。在另外两个方面，边填充比顶部/底部填充小1px。

修改

这绝对是一个子像素渲染问题。

我想我无法帮助它：即使我的CSS中的所有内容都在px中，我显然必须将一个元素放在另一个元素中，我不能保证它适合每个硬件像素网格。

我通过移动方块看到了问题：根据它们之间的位置和边距，方块会​​改变，最终不是方形。

我认为我应该放手吧！除非有人有其他想法，但我找不到任何适用于每个浏览器的干净解决方案，以解决目前为止的这类问题。