使用 CSS 制作的条纹背景取决于 IE 中的背景大小答案

【问题标题】：Striped background made with CSS is dependant on background-size in IE使用 CSS 制作的条纹背景取决于 IE 中的背景大小
【发布时间】：2014-10-12 21:29:08
【问题描述】：

在玩用 CSS 制作的条纹渐变时，我发现 IE 有一个奇怪的行为，在减少 background-size 属性中的高度值后条纹变得不可见。

此行为仅在 IE 中：Chrome 和 Firefox 按预期工作。

代码如下：

HTML

<body>
  <div class="stripes all">&nbsp;</div>
  <div class="stripes no_ie">&nbsp;</div>
</body>

CSS

.stripes {
    height: 500px;
    background-image: linear-gradient(red 1px, transparent 1px);
    background-attachment: scroll;
    background-position: 0 -10px;
    background-color: white;
}

.all {
    background-size: 100% 98px; /* Will show stripes in IE */
}

.no_ie {
    background-size: 100% 97px; /* Will not show anything in IE */
}

这是演示： http://jsbin.com/jipehipobele/1/edit

如果可能的话，有人可以向我解释为什么会发生这种情况以及如何规避它吗？

【问题讨论】：

标签： css internet-explorer linear-gradients background-size

【解决方案1】：

我现在解决这个问题的方法是稍微改变渐变的制表位：

 background-image: linear-gradient(red 1px, transparent 1.1px);

这适用于 IE，并且不会更改背景大小。无论如何，谢谢你，Taruckus 帮助我找到了这个解决方法。

【讨论】：

感谢您的关注

【解决方案2】：

很奇怪的问题。我发现它与浏览器缩放有关；如果您使用浏览器/IE 放大，条纹将会显示。 zoom 属性是一个旧的 IE 狗，所以给它一个最小值希望是一个合适的解决方法。

.stripes {
height: 500px;
background-image: linear-gradient(red 1px, transparent 1px);
background-attachment: scroll;
background-position: 0 -10px;
background-color: white;
zoom:1.05;
}

【讨论】：

不幸的是，background-size 的确切像素数在这种情况下确实很重要。所以缩放不适用。