2011-02-04 10 views
7

私はこの上に私の髪を引っ張っています。IE(7?)はスプライトの背景を歪ませますか?

私たちは、私たちのサイトのオーバーホールを進めています。最後のステップとして、すべてのグリフとアイコンをスプライトにまとめようとしています。それらはすべて透過的です.pngなので、スプライトもまたです。バックグラウンドがsptireから来た場合、IEはそれを歪ませるように見えます。元のファイルからのものであれば、それはありません。 FFとChromeはいずれにしても大丈夫です。

私は、ピクセルが同一であることを確認するために、グリッドで横書き画像と縦書き画像を並べて表示しています。私は正しい座標を使用していることを確実にするためにスプライトのピクセルを何度も数えました。私のCSSは次のようになります:

XXbackground: url(sprite.png) no-repeat 0px -837px; /* lozRedRedSpacer */ 
background: url(lozRedRedSpacer.png) no-repeat; 

「XX」は私が前後に切り替えることができます。シングルファイルバージョンでは、完全に見えます:seperate file background。スプライトのバージョンはspriteのようになります。それは、それが垂直方向と水平方向の両方で「押しつぶされた」ように見えます。これはFFや​​Chromeでは発生しません。

アイデア?

EDIT私は、ノイズのほとんどを取り除くと例hereを投稿することができました。私は私の問題を説明するために例にノートを追加しました。

これを見ていただきありがとうございます。私たちは本当に重複しないCSSの擬似クラスとズームの問題でこれらの「重複分圧器画像」を交換してきましたので、

UPDATEがなくなっているようです。もちろん、私たちは新しい問題を抱えています。IE8はzオーダーを間違え、IE7は疑似エレメントを全く理解しません。しかし、少なくともマークアップは簡単で、ズームの問題はなくなりました。

+1

私にとっては、それは両者の軸に沿ってオフセットされた1ピクセルのずれに似ていません。ゼロピクセルのxオフセットはそれに同意しませんが、スプライト数学をまだ確認していない場合は、おそらくそれを確認する価値があります。 –

+0

@Ben:それはすばらしい提案です。私たちは数字に驚きました。 Yを1px上または下に動かすと、画像が欠落して見える水平の黒い線が上または下に表示されます。この場合、可能であれば歪みが「サブピクセル」に現れます。 – n8wrl

+2

jsfiddle.netのような問題を示す実例を得ることができますか?それは奇妙です;何らかの形でベベル効果が追加されているようです。 –

答えて

5

私の問題は、IEの「ズーム」機能に起因することが判明しました。ズームがなければ、他のブラウザと同じようにすべてが素晴らしいように見えます。 150%または200%でも良好に見えます。しかし、私が持っていた場所の125%がこの歪みを引き起こします。それはIE7とIE8で起こります。

+1

ありがとうございます。私はIE 9でこの同じ問題を発見しました。私は100%にズームし、問題はなくなりました。なぜマイクロソフトはなぜそれを正しく得ることができないのですか?なぜ彼らはウェブキットを使い、独自のブラウザを作ることをあきらめて、開発者の手間と頭痛を軽減し、ウェブ全体を前進させるのでしょうか。 –

関連する問題