0

我有一个显示插入框阴影的小提琴。

我想在 IE 中实现这种类型的效果有没有我可以应用的 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 版本的插图。

有人对此有任何运气吗？

4

2 回答 2

5

唯一有用的提示如下：

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

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

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

于 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 回答