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-Filter，如果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>

插入框阴影IE8

2 个答案: