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

Question

我正在尝试绘制一个网格作为div元素的背景。我只是喜欢使用 css，所以我决定使用repeating-linear-gradient. 但是，似乎浏览器对此的反应完全不同，要么只画很细的线，要么根本不画线（最糟糕的是 Chrome，但 Mac 上的 Firefox（v21）似乎也有一些问题）。我在这里创建了一个 jsfiddle （如果您什么都看不到，请尝试其他浏览器（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

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

Answer 2

我想我找到了答案（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在这里，一些代码在这里：

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