2

background-sizeCSS で作成された縞模様のグラデーションをいじっていると、プロパティの高さの値を減らすと縞模様が見えなくなるという IE の奇妙な動作が見つかりました。

この動作は 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 に答える