2

在玩用 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

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

4

2 回答 2

1

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

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

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

于 2014-08-20T07:04:41.320 回答
0

很奇怪的问题。我发现它与浏览器缩放有关；如果您使用浏览器/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/

于 2014-08-19T18:25:23.273 回答