0

MS のぼかしフィルターとグロー フィルターを使用して、このページに表示されているように Internet Explorer でドロップ シャドウを生成できない理由を見つけようとして、何日も悩まされてきました。

http://kilianvalkhof.com/uploads/ieshadow.html

ここでは、2 番目のテキスト要素が最初の要素の下に配置され、少しオフセットされ、フィルターが適用されます。私のレイアウトは、上部の H1 要素のドロップ シャドウに同じ手法を使用しています。これは、標準準拠のブラウザーでは問題なく表示されますが、フィルター処理された要素は IE8 または IE9 では表示されません。

http://a11.cosd.com

私のマークアップは<span>、実際の例のようなものを使用しています:

<h1>AREA11<span class="IEshadow">AREA11</span></h1>

セレクターを除いてCSSは同じです：

#headerContainer header h1 span.IEshadow {
  display: none;
}
.lt-ie10 #headerContainer header h1 span.IEshadow {
  display: block;
  position: absolute;
  left: -4px;
  top: -4px;
  z-index: -1;
  zoom: 1;
  filter: progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=2) progid:DXImageTransform.Microsoft.blur(pixelradius=5,enabled='true');
  -ms-filter: "progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=2) progid:DXImageTransform.Microsoft.blur(pixelradius=5,enabled='true')";
}

しかし、(F12) 開発者ツールを使用して IE8 および IE9 にfilter:プロパティがリストされていることを確認できても、私のレイアウトではフィルターはまったく適用されません。デザインでビジュアル フィルターを使用したのはこれが初めてではありませんが、今回はコードを 1 文字ずつコピーしました。

1 つの奇妙な点: filter:IE8 開発者ツールでプロパティを表示すると、他のプロパティが同じ行にまとめて表示されますが、問題がまだ発生している IE9 では正常に表示されます。

ページから他のすべての Javascript を無効にし、マークアップと CSS を簡素化し、作業例のように IE 条件付きコメントを避けて配置するなど、想像できるすべてを試しました...変更はありませんfont-face。<span>(最終的にこれを jQuery に実装するには、IE の条件付きコメントを避ける必要があります。)

このコンテキストで MS フィルターが機能しない理由について、ここで見逃している非常に基本的なことがあるはずです。テスト中にレイアウトが変更された場合は、ここで進捗状況と調査結果を完全に要約します。

4

1 に答える 1

1

これはz-index問題です。.IEshadowは背景の後ろに配置されています。

あなたに10を与えれば、それはうまくいくはずですh1。z-index

#headerContainer header h1 {
    ...
    z-index: 10;
}

あなたはまたの色を変更したいかもしれません.IEshadow 

.lt-ie10 #headerContainer header h1 span.IEshadow {
    ...
    color: #000000;
    ...
}
于 2013-01-07T03:19:48.467 に答える