私はこの上に私の髪を引っ張っています。IE(7?)はスプライトの背景を歪ませますか?
私たちは、私たちのサイトのオーバーホールを進めています。最後のステップとして、すべてのグリフとアイコンをスプライトにまとめようとしています。それらはすべて透過的です.pngなので、スプライトもまたです。バックグラウンドがsptireから来た場合、IEはそれを歪ませるように見えます。元のファイルからのものであれば、それはありません。 FFとChromeはいずれにしても大丈夫です。
私は、ピクセルが同一であることを確認するために、グリッドで横書き画像と縦書き画像を並べて表示しています。私は正しい座標を使用していることを確実にするためにスプライトのピクセルを何度も数えました。私のCSSは次のようになります:
XXbackground: url(sprite.png) no-repeat 0px -837px; /* lozRedRedSpacer */
background: url(lozRedRedSpacer.png) no-repeat;
「XX」は私が前後に切り替えることができます。シングルファイルバージョンでは、完全に見えます:。スプライトのバージョンはのようになります。それは、それが垂直方向と水平方向の両方で「押しつぶされた」ように見えます。これはFFやChromeでは発生しません。
アイデア?
EDIT私は、ノイズのほとんどを取り除くと例hereを投稿することができました。私は私の問題を説明するために例にノートを追加しました。
これを見ていただきありがとうございます。私たちは本当に重複しないCSSの擬似クラスとズームの問題でこれらの「重複分圧器画像」を交換してきましたので、
UPDATEがなくなっているようです。もちろん、私たちは新しい問題を抱えています。IE8はzオーダーを間違え、IE7は疑似エレメントを全く理解しません。しかし、少なくともマークアップは簡単で、ズームの問題はなくなりました。
私にとっては、それは両者の軸に沿ってオフセットされた1ピクセルのずれに似ていません。ゼロピクセルのxオフセットはそれに同意しませんが、スプライト数学をまだ確認していない場合は、おそらくそれを確認する価値があります。 –
@Ben:それはすばらしい提案です。私たちは数字に驚きました。 Yを1px上または下に動かすと、画像が欠落して見える水平の黒い線が上または下に表示されます。この場合、可能であれば歪みが「サブピクセル」に現れます。 – n8wrl
jsfiddle.netのような問題を示す実例を得ることができますか?それは奇妙です;何らかの形でベベル効果が追加されているようです。 –