插图框阴影 IE8

Question

我有一个 fiddle，它显示了一个嵌入框阴影。

我想在 I.E. 中实现这种类型的效果。有没有我可以应用的 jquery 框阴影，可以解决 IE 的问题？

我查看了 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 版本的插图。

有人对此有好运吗？

Answer 1

唯一有用的提示如下：

如果不是绝对必要，请在 IE8 中忽略此效果。没有等效的 MS 过滤器，如果 css3PIE 不适合你，如果你不想使用图像，你就会迷失方向。

但是最后的解决方案是让用户安装chrome-frame，我认为这种“噱头”是不可接受的。

在开发您的网站时，如果您不想失去 IE 社区，就不要依赖内框阴影之类的功能。将其用于装饰，但不要做任何如果不存在会严重影响可用性的事情。

Answer 2

有一个解决方案适用于没有 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>