0

Internet Explorerでぼやけたドロップシャドウ（CSS3ボックスシャドウに似ています）を作成しようとしています。これを行う最も論理的な方法は、IEでシャドウを必要とするすべての要素を見つけ、jQueryを使用してそれらの中に新しいdivを挿入することです。この新しいdivは、その親とまったく同じスペースを埋め、IEのぼかしフィルターを使用してぼかしを入れることができます。htmlは次のようになります。

<div id="parent">
    <div class="ie_shadow"></div>
    All visible content goes here.
</div>

そしてCSS：

#parent {
    position: relative;
    height: 200px;
    width: 200px;
}
.ie_shadow {
    background: #111;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1; /* has to be at least one less than its parent */
    filter:progid:DXImageTransform.Microsoft.blur(pixelradius=3, MakeShadow='true', ShadowOpacity='0.60');
}

これは完全に機能します（異なる領域のオーバーラップが正しく機能するように少し調整する必要があります）。ただし、IE7以前では、「位置」の設定方法に関係なく、子要素を親の後ろに配置できないようです。および「z-index」。

もう1つのオプションは、シャドウが必要なボックスの前または後に.ie_shadow divを挿入することですが、これには独自の問題がいくつかあります。具体的には、影を必要とするdivによって明示的に設定されない限り、影の幅（および位置）を設定する良い方法はありません。.ie_shadowの高さと幅は明示的に設定されており、自動的に再計算されないため、ユーザーがページのサイズを変更した場合にも、このメソッドは機能しなくなるようです。

どんな助けでも大歓迎です。ありがとう！

編集：実際の例については、こちらを参照してください：http: //martinsmucker.com/demo/ie_shadow.html IE7に恵まれなくなった私たちにとって、IE7標準モードでページを表示するようにIE8を設定すると、問題が忠実に再現されます。

4

1 に答える 1

1

おそらく最良の答えは次のとおりです。

明らかにそれは素晴らしい答えではないので、ここで私が試してみることができます。wrap()影を要素の絶対位置の子として挿入する代わりに、jQuery の関数を使用して要素をラップします。

$(document).ready(function(){
    $('.has_shadow').wrap('<div class="ie_shadow"></div>');
    $('.ie_shadow').each(function(){
        var childwidth = $(this).children('.has_shadow').css('width');
        $(this).css('width', childwidth)
    });
});

唯一の課題は、親要素を子要素と同じ幅にすることです。フローティングのままにすることはできますが、ページの既存のデザインを完全に破壊する可能性があります。javascript を使用して子の幅を見つけ、親を同じ値に設定することは可能かもしれませんが、これは子の実際の値が定義されている場合にのみ機能します。私はまだこれをいじっていますが、これが私が得ようとしている最良の答えのようです。;)

于 2010-11-05T20:50:47.443 に答える