css - CSS - 具有线性渐变（生成 svg）的 IE9 问题背景图像无法正确重复

Question

我试图在网上寻找这个特定问题的答案，但老实说，我真的不知道这里发生了什么。如果你想玩，我在这里创建了一个小提琴来显示情况。

这是适用于 Chrome、Firefox 和 IE10+ 的代码

HTML 代码

CSS 代码

.low {
  width: 113px;
  height: 14px;
  background-color: red;
  background-image: linear-gradient(to right, white 50%, transparent 0);
  background-size: 4px;
  background-repeat: repeat;
}

我需要 IE9 的后备。正如您在小提琴中看到的那样，我已经生成了适用于 IE9 的 svg 图像。目前 div 为 113px x 14px，背景大小为 4px

问题是，如果宽度 > 113，则不再显示条纹，而是仅显示背景颜色。相反，如果我在某个点设置更高的高度，则条纹会再次清晰显示。

我该如何解决这个问题？它与什么有关？任何帮助表示赞赏。

Answer 1

我解决了这个问题

background-size: 4px 4px;

现在我将深入研究文档以找出原因。