2012-02-13 3 views
1

インターネットエクスプローラでFadein jqueryエフェクトを使用すると、PNGの周りを黒く塗りつぶしました。私が使用しているコードはすべて修正されていないので、何かが欠けているはずです。私はこのコードのビットたhttp://www.kaimeramedia.com/derek/Websitejquery fade hoverを使用してIEエクスプローラでPNGを黒く塗る

:マイページはこちら訪問することができ

.item img { 
    background: transparent; 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; 
/* IE8 */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); 
/* IE6 & 7 */ 
    zoom: 1; 
} 

を、私は唯一のインデックスに正しいように私メニューページ(http://www.kaimeramedia.com/derek/Website/menu.php)で動作するようにそれを得ることができません。 PHPテンプレート。

すべてのブラウザで画像がぼやけて消えてしまいます。IE 6+では、本当に太い黒い境界線が表示されます。私はこの問題について議論する多くのサイトがあることを知っていますが、私は運がなかった、少なくとも私は間違ったコードを入力する必要があります。

私は、編集CSSと以下のスタイルタグを試みたが、どんな効果を持っていないようでした:

div.fadehover { 
    position: relative; 
} 

img.b { 
    position: absolute; 
    left: 0; 
    top: 0; 

    z-index: 10; 
    opacity: 0; 
    filter: alpha(opacity=0); 
    background: transparent; 
} 

.style2 { font-style: italic;  color: #2D6773; } 
.style3 { color: #122833 } 

誰かが本当にいただければ幸い私のサイトへの作動液で私を助けることができれば。

+0

最後に、bgと完全にオーバーレイされたjpgを作成しなければなりませんでした.I IE8以下のInternet Explorerブラウザを検出したときに、 ! - [If IE 8]>; –

答えて

0

この問題には多くのソリューションがあります。
1)の代わりに
2 PNG8を使用してください)あなたのイメージ
4にfilter: 0を追加してみてください)、このようなUnit PNG Fix
3としてJSスクリプトを使用)を使用すると、すなわちバックグラウンドをフィルタ何の透明性が必要とされていない場合はRGBAをエミュレートすること(255,255,255,0)

background: transparent; 
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); /* IE6 & 7 */  
zoom: 1; 

5)最後に、ちょうどJPGを使用

編集:私はCSSハック - プロパティIEによって引き起こされ、この正確に同じ問題を持っていたこの画像の一方がPNG8でどのように見えるか、私はすべての主要な相違点が表示されていないさ... About PNG8

+0

これは私がインターネット上で見つけたのと同じ解決策です...あなたが提供しているものを見てみましょう:1. png8はgifを使うよりもはるかに優れていません...透明度を持つ必要があります。ユニットPNGフィックスは動作していないようですが、私のサイトでそれを動作させる方法を教えていただけたら、私はそれを歓迎します。 3.フィルター:0はそれを変更しませんでした。画像が覆われ、黒がまだ見えるまでオーバーレイされるだけです。 4。あなたや他の誰かが私のコードでrgbaをエミュレートすることについて説明してくれれば役に立ちます。 –

+0

5.全体のポイントは、透明度を元に戻さないようにする方法です。jpegを使用して背景を変更したい場合は、たとえば各メニュー項目も変更する必要があります。そこには多くのソリューションがあると確信していますが、誰かが私のコードを使って私に実例を見せてくれたら、私は感謝以上のものになるでしょう。 –

+0

には番号4のコードがいくつか追加されています。 – elclanrs

0

必要です。私のアニメーションでは、この属性を削除します。

$( 'elem')。css( 'filter'、 '');

古いIEは単純に実行できません。 javascriptを使用して多くのIEの欠陥を「克服する」ことができます。これらのブラウザでは、さらに遅くなる可能性があります。

最適な解決策は、優雅な分解と漸進的な強化です(これ以上はhttp://dev.opera.com/articles/view/graceful-degradation-progressive-enhancement/)。 IEができないことやできないことをIEに行わせないでください。私はクライアントがこれを理解するのに苦労していることを知っていますが、私の魔術師になろうとする日は終わりです。

関連する問題