0

はめ込みボックスの影を表示するフィドルがあります。

IEでこのタイプの影響を実現したいIEの問題を回避するために適用できるjqueryボックスシャドウはありますか？

htcPIEを見てきましたが、現在のアプリケーションではうまく動作しませんでした。他のヒントはありますか？

最新のブラウザで機能するコードは次のとおりです。

 -moz-box-shadow: inset 3px 3px 4px #000;
 -webkit-box-shadow: inset 3px 3px 4px #000;
  box-shadow: inset 3px 3px 4px #000;

私はIEで次のように見ていました：

-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";

しかし、IEバージョンの挿入図がありません。

誰かこれで運がありますか？

4

2 に答える 2

5

唯一の役に立つヒントは次のとおりです。

どうしても必要でない場合は、IE8 ではこの効果を省略してください。これに相当する MS-Filter はありません。また、css3PIE がうまくいかなかった場合、画像を使用したくない場合はほとんど失われます。

ただし、最後の解決策は、ユーザーがクロムフレームをインストールできるようにすることです。これは、そのような「ギミック」には受け入れられないと思います。

サイトを開発するとき、IE コミュニティを失いたくない場合は、inner box-shadow などの機能に頼らないでください。装飾用として使用しますが、存在しない場合にユーザビリティに重大な影響を与えるようなことはしないでください。

于 2012-10-26T20:31:38.380 に答える
0

css3PIE を使用しない IE で機能するソリューションがあります。IE 7/8 では、影を適用する要素に背景色を設定する必要があります。それ以外の場合、影は子要素 (テキストを含む) に継承されます。

ここでは、すべてのブラウザーでボックス シャドウを実現する方法を示します。もちろん、独自の色、強度、方向などをカスタマイズする必要があります。

.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');
}

.wrapper{
    margin: 10px;
    border: solid 1px #A7A7A7;
    background-color: white;//or whatever color you need; however transparent doesn't work
   }

次に、両方のクラスを適用します

<div class="wrapper shadow">
     <div>
          <p>Some text that used to have a shadow, but doesn't anymore</p>
     </div>
</div>
于 2013-03-14T22:48:38.900 に答える