IE中div的内阴影答案

【问题标题】：Inner shadow to div in IEIE中div的内阴影
【发布时间】：2012-06-01 20:04:45
【问题描述】：

我为 div 创建了一个内部阴影，如下 css 代码所示：

.gil_Help_ContentArea {
    width: 300px;
    height: 200px;
    margin: 5px 0 0 0;
    padding: 0px; 
    background-color: #fff;
    box-shadow: inset 0 0 10px #ccc;
    -moz-box-shadow: inset 0 0 10px #ccc;
    -webkit-box-shadow: inset 0 0 10px #ccc;
    -khtml-box-shadow: inset 0 0 10px #ccc;
}

它在 IE 以外的浏览器上运行良好，但我希望在 IE 中具有相同的效果。如果有人愿意提供帮助，将不胜感激。

您可以在http://jsfiddle.net/shabirgilkar/Mu9jL/查看效果。

【问题讨论】：

通常的黄金解决方案 (CSS3 PIE) 不适用于 inset。只是想我会指出这一点。
@thirtydot - 有点遗憾。我怀疑除了使用图像之外，还有其他可行的解决方案。那好吧。 :-/

标签： internet-explorer css

【解决方案1】：

IE 8 及更低版本不支持box-shadow CSS3 属性，但它或许可以工作。你应该看看这些文章...

我建议在 IE 8 及以下版本中使用图片（使用条件样式表）。

我想出了一个糟糕的解决方案，但它适用于 IE 8、Chrome、Firefox、Safari 和 Opera。看看小提琴...

http://jsfiddle.net/UnsungHero97/Mu9jL/3/

我希望这会有所帮助。
赫里斯托

【讨论】：

【解决方案2】：

http://css3generator.com/

选择框阴影

-webkit-box-shadow: inset 0px 0px 15px #313199;
-moz-box-shadow: inset 0px 0px 15px #313199;
box-shadow: inset 0px 0px 15px #313199;

您指的是哪个版本的 IE？不同的版本有很大的不同。

【讨论】：

他问的是内影而不是外影
你可以在界面中选择inset
我在询问 IE 中 div 的内阴影（低于 IE8），正如我在 jsfiddle.net/shabirgilkar/Mu9jL 中所展示的那样
@Homer6 我的目标是 IE8 及以下
那就用推拉门吧。 9以下不支持css。alistapart.com/articles/slidingdoors

【解决方案3】：

目前（2011 年 11 月）似乎没有人为 IE8 或 IE7 开发了 polyfill 来满足您的需求。例如，请参阅 CSS3PIE (https://github.com/lojjic/PIE/issues/3)，它支持 box-shadow，但不支持 inset 标志。

您最好的（唯一？）选项是创建一个图像用作元素的背景。这显然不是一个很好的解决方案。

（另外，为了帮助您和其他人找到其他有用的 polyfill，这里有一个可能有用的链接：https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills）

【讨论】：