Firefox和Chrome之间负利润的结果是否有所不同？

Question

我使用inline-block并排放置元素。 我想使元素之间的间距为2px，所以我为span元素设置了负边距。

* {
  margin: 0;
}

.content {
  width: 100%;
  min-width: 320px;
}

span {
  display: inline-block;
}

span {
  display: inline-block;
  width: 78px;
  padding: 3px 10px;
  cursor: pointer;
  background: #ddd;
  color: #777;
  margin-right: -2px;
  width: calc(25% - 22px);
}

span:hover {
  background: #eee;
}

<div class="content">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
</div>

---

问题1 。它与Firefox 64.0兼容。但是，在使用Google Chrome 71.0进行检查时，最后一个span元素出现了。

编辑：同样，奇怪的是，它在CodePen中工作正常，但是在stackoverflow代码段中却无法正常工作。

为什么会出现这些问题？

Firefox（CodePen版本）中的屏幕截图： Firefox的屏幕截图（stackoverflow的运行摘要版本）： Google Chrome浏览器中的屏幕截图：

---

问题2 。我将width: 25%设置为span元素的全角。但是，除非从25％（在Firefox中）减去22像素，否则水平宽度不会变满。

如何计算22px的值？