2009-08-26 22 views
1

私はバックグラウンドでpng画像を表示するCSSスタイルを持っています。 ie6を除くすべてのブラウザでうまく動作します。ie6 CSSの背景画像の問題

ie6では、バックグラウンド画像がブロックに合うように引き伸ばされます。これをどうすれば解決できますか?ここに私がこれを行うために使っているCSSがあります。

.error 
{ 
    color: #D8000C; 
    background-color: #FFBABA; 
    background-image: url('error.png'); 
} 

IE7/FF3.5

alt text

IE6

alt text

+1

は、そのイメージは透明PNGですか? – strager

+0

私はそれが起こる前にそれを見たことがない! – alex

答えて

4

IE6用のpng透明性の修正スクリプトを使用するあなたは、おそらく、私はこの問題を考えますそれはおそらくapplだからそこにあるスケール方法です。

this pageのコメントを読んでください。

あなたのpng透明度の修正に関するドキュメントには、おそらくこれが含まれます。

私は個人的にIE6.0で透明なPNGを使用して、そこにいろいろな修正が加えられているにも関わらず、大きな痛みを感じました。私はこれがオリジナルの答えではないことを知っていますが、これをサポートするためにハッキングに頼るのではなく、IE 6.0を実際にサポートする必要がある場合は、条件付きチェックを行い、gifまたはjpgバージョンでイメージを置き換えます。それとも、IE 6.0を既にドロップしていますが、今年は、すべてのクライアントが新しいプロジェクトでIE 6.0をサポートしていないと話しました。真剣に、それは、物事が私たちの職業生活をそんなに惨めなものにするのをやめたのは気のきいた時です。

+0

m既にJQuery PNGFixプラグインを使用しており、すべてのブラウザでうまく機能していますが、この問題はまだ解決していません。 –

+0

Stragerを聞くと、使用するプラグインはAlphaImageLoaderを使用してレンダリングします...これは他の最初の場所にpngFixが必要ないので、ブラウザを使用することができます – kitsune

+0

"...それは私たちのプロの生活をそんなに神秘的なものにするのをやめたのです。私はそれが好きです –

2

AlphaImageLoader filterを使用している場合は、sizingMethod='scale'が存在しないことを確認してください。削除するか、scaleの代わりにimageに設定してください。

+0

m AlphaImageLoaderを使用していません。 –

+0

@s_ruchit、そうです。使用しているプラ​​グインがフィルタを使用しています。ソースコードを編集し、この問題についてプラグインの作者に連絡してください。 – strager

-1

背景画像と背景位置の実際の幅と高さを設定します。

.error 
{ 
    color: #D8000C; 
    background-color: #FFBABA; 
    background-image: url('error.png'); 
    background-position:left; 
    width:251px; 
    height:72px; 
    background-repeat:no-repeat; 
} 

ここで、幅と高さは誤差の実際の大きさです.png画像。それが役に立てば幸い。

+1

これは動作しません。 widthとheightはスタイル 'error'を実装する要素に適用されます。 –

+0

divの別の要素を画像のサイズで追加し、その画像に画像を引き伸ばすことができます。しかし、これは回避策になります... – Kobi