在某些浏览器中看不到重复线性渐变

Question

我正在尝试绘制网格作为div元素的背景。我只想使用css，所以我决定使用repeating-linear-gradient。然而，似乎浏览器对此反应完全不同，要么只绘制非常细线或根本不绘制（最糟糕的似乎是Chrome，但Mac上的Firefox（v21）似乎也存在一些问题）。我创建了一个jsfiddle here（如果你看不到任何东西，尝试另一个浏览器（Opera似乎做得最好）或调整结果窗口的大小）。

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

CSS

.grid {
    background-image: 
        repeating-linear-gradient(to right, transparent 1px, transparent 39px, red 40px, red 40px),
        repeating-linear-gradient(to bottom, transparent 1px, transparent 39px, red 40px, red 40px);
}

Answer 1

我想我找到了答案（http://jsfiddle.net/PwzNB/4/）：

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

奇怪的是，background-size: 10px 10px;会将网格大小改为10x10，而不会更改background-image属性......

更新

这可能是我将要解决的版本。网格尺寸基于背景图像的大小，因此我只需要设置background-size来调整网格大小。 Jsfiddle here，这里有一些代码：

.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%);
}

Answer 2

@orange是对的，他找到了解决方案，但保持background-size: 20px 20px;会因不同的分辨率而异。所以我的建议是以background-size: 2em;更好的方式做到这一点。但我认为你应该接受@orange的回答。