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

Question

我正在尝试绘制一个网格作为div元素的背景。我只是喜欢使用css，所以我决定使用repeating-linear-gradient。然而，浏览器对此的反应似乎截然不同，要么只画一条很细的线，要么根本没有(最糟糕的似乎是Chrome，但Mac上的火狐(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;，仅此而已。但我认为你应该接受“橙色答案”。