3

以下をdivにアタッチすると、IEでグラデーションとボックスシャドウのあるボックスが表示されます。

filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#D08080', EndColorStr='#E7A292') progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=170, Color='#B8B8B8');

ただし、シャドウフィルターだけを実行すると、div内のテキストにシャドウが発生します。フィルター処理されたグラデーションを一定の色で設定するという明白な（そして醜い）ハック以外に、IEのすべてのバージョンで、テキストではなく単純なdivで自分自身をシャドウイングするにはどうすればよいですか？

4

2 に答える 2

2

IE's filters are always an ugly hack, can be hard to get right, and very often cause weird bugs. My recommendation is to avoid using them wherever possible.

Take a look at CSS3Pie for a neat way around the issue.

CSS3Pie is a hack for IE that allows it to use standard CSS properties instead of filter for gradients and box shadows. It also does border-radius.

I hope it'll solve your problems.

于 2011-03-10T10:11:02.123 に答える
2

There is a way to this in IE without CSSPie. The issue in IE 7 & 8 is that the element to which the shadow is applied, needs to have a background color set. Otherwise the shadow is inherited by child elements (including text).

This is how I achieve a cross browser box-shadow. This should work for IE 7-10, All Chrome & FF release that I have ever tried and Safari too. Ignore my color choices, obviously you'll need to set them to whatever works for your page.

.wrapper {
border: solid 1px #A7A7A7;
background-color:#ffffff;/*transparent won't work*/
}

.shadow {
-moz-box-shadow: 2px 2px 3px #A7A7A7;
-webkit-box-shadow: 2px 2px 3px #A7A7A7;
box-shadow: 2px 2px 3px #A7A7A7;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#A7A7A7')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#A7A7A7');
}

Then just apply both classes to the parent element

<div class="wrapper shadow">
   <div id="someInnerDiv">
      <p>Some text that used to inherit the box-shadow, but doesn't anymore</p>
   strong text</div>
</div>
于 2013-03-15T04:15:24.560 に答える