CSS渐变棋盘图案

I want to create a checkerboard pattern using gradients. I've found an example and modified it to my needs, however it only works with -moz prefix. When I remove the -moz prefix, the pattern is completely different.

我怎样才能做到这一点-moz棋盘图案与无前缀一起使用linear-gradient?

body {
  background-image:
  linear-gradient(45deg, #808080 25%, transparent 25%), 
  linear-gradient(-45deg, #808080 25%, transparent 25%),
  linear-gradient(45deg, transparent 75%, #808080 75%),
  linear-gradient(-45deg, transparent 75%, #808080 75%);

  background-size:20px 20px;    
  background-position:0 0, 10px 0, 10px -10px, 0px 10px;
}

只需修改background-position就像下面的代码片段一样以获得所需的输出。这在 Firefox、Chrome、Opera、IE11 和 Edge 中运行良好。

body {
  background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

问题似乎是由于处理角度的方式不同而发生的-moz线性渐变和标准渐变。-45deg in the -moz线性梯度似乎等于135deg在标准梯度（但改变角度会导致中间出现一个奇怪的点).

下面的屏幕截图显示了差异（均在最新的 Firefox v44.0 中拍摄）。

带 -moz-线性梯度的输出：

线性梯度输出：