Css 重复线性渐变在某些浏览器中不可见

我试图画一个网格作为

div

元素的背景。我只是喜欢使用css，所以我决定使用重复线性渐变。然而，浏览器对此的反应似乎完全不同，要么只画很细的线条，要么根本就不画（最糟糕的是Chrome，但Mac上的Firefox（v21）似乎也有一些问题）。我已经创建了一个JSFIDLE（如果你看不到任何东西，请尝试其他浏览器（Opera似乎做得最好）或调整结果窗口的大小）

css代码有什么问题吗？或者有人知道解决方法吗？

css

.grid{
背景图像：
重复线性渐变（向右，透明1px，透明39px，红色40px，红色40px），
重复线性渐变（至底部，透明1px，透明39px，红色40px，红色40px）；
}

我想我找到了答案（）：

奇怪的是，

背景尺寸：10px 10px

将网格大小更改为

10x10

，而不更改

背景图像

属性

更新 这可能是我将确定的版本。网格尺寸基于背景图像的大小，因此我只需要设置

背景尺寸

来调整网格尺寸，这里有一些代码：

.grid {
  background-size: 20px 20px;
  background-image: 
    repeating-linear-gradient(to right, transparent, transparent calc(100% - 1px), red calc(100% - 1px), red 100%),
    repeating-linear-gradient(to bottom, transparent, transparent calc(100% - 1px), red calc(100% - 1px), red 100%);
}

---

@orange是对的，他找到了解决这个问题的方法，但保留了

背景大小：20px 20px将以不同的分辨率变化。所以我的建议是用更好的方法
背景尺寸：2米仅此而已。但我认为你应该接受橙色的回答

.grid {
  background-size: 20px 20px;
  background-image: 
    repeating-linear-gradient(to right, transparent, transparent calc(100% - 1px), red calc(100% - 1px), red 100%),
    repeating-linear-gradient(to bottom, transparent, transparent calc(100% - 1px), red calc(100% - 1px), red 100%);
}