使用Firefox完成三角形的奇怪行为：在伪之前

Question

我正在使用：before和：after伪元素来创建形状。在这种情况下，三角形形状需要显示为矩形的末端。我发现自己遇到了这个问题，我不明白为什么会这样。图像应该看起来像这个图像1，但它看起来像图像2。

图片1（除FF之外的所有浏览器）：

image 2（Firefox）：

正如在这里所要求的，你有一个代码的jsfiddle：

http://jsfiddle.net/LpXxM/

.news-info a:before {
  position: absolute;
  top: 0;
  left: -20px;
  border-right: 20px solid rgba(64, 64, 64, 0.85);
  border-top: 20px solid transparent;
  content: "";
}

我刚检查过，似乎问题只是左边的css属性。如果不是左：20px，它将被留下：22px它适用于Firefox，但当然其余的浏览器是错误的。那么，为什么在firefox中与其他浏览器有2px的差异？如何解决这个问题或针对这个问题？

我正在使用normalize作为网站的重置。有人可以帮忙吗？！