【问题标题】:inset box shadow IE8插图框阴影 IE8
【发布时间】:2012-10-17 03:15:31
【问题描述】:

我有一个 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 版本的插图。

有人对此有好运吗?

【问题讨论】:

标签: html internet-explorer css internet-explorer-8


【解决方案1】:

唯一有用的提示如下:

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

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

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

【讨论】:

  • 这样的话让用户自己下载 Chrome 或 Firefox =P 但总的来说,我同意这一点,对于 IE8 就省略它。
  • 哦,我知道让用户下载另一个浏览器是不可能的,但在理想的世界中...... =P(反正我只是在开玩笑)但我同意 - 使用CSS3 用于装饰目的,而不是功能 - 特别是如果 IE 是您的流量的主要来源。
  • @Andy 在理想的 web 开发者世界中,只有一个浏览器 100% 支持所有 web 标准,没有任何错误 =D
【解决方案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>

【讨论】:

  • 哦不,安德斯你是对的!让我为 Internet Explorer 5.5 到 8 提供一个纯 CSS 的答案。
猜你喜欢
  • 2011-08-11
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多