Question

当使用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

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

Answer 1

我现在解决这个问题的方法是稍微更改渐变的tabstops：

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

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

Answer 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;
}

更多关于缩放http://css-tricks.com/almanac/properties/z/zoom/

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

HTML

CSS

2 个答案: