是否可以在 IE8 中使用 box-shadow？

Question

为什么 CSS 在 frameworks/environments/browsers 中的应用不一致？

我在 Meteor 中创建了一个原型，其中 CSS 可以很好地创建阴影效果并在悬停时为各种图像添加边框；具体来说，在 Meteor 原型中（它是一个 Sharepoint 应用程序，但使用 Meteor 测试这样的功能要快得多）我有这个 CSS:

#imgPostTravelTop:hover, #imgPostTravelTopRight:hover, #imgPostTravelCenter:hover, #imgPostTravelBottom:hover {
  z-index: 4;
    -moz-box-shadow: 0 0 7px #000;
    -webkit-box-shadow: 0 0 7px #000;
    box-shadow: 0 0 7px #000;

  border: 1px solid gold;
}

它工作正常 - 在鼠标输入/悬停在图像上时，它会长出一个金色的五点钟阴影。

但是，Sharepoint 代码中的内容几乎相同：

.finaff-form-help-post-travel-centerimage:hover, 
.finaff-form-help-post-travel-bottomimage:hover {
    z-index: 4;
    -moz-box-shadow: inset 0 0 7px #000;
    -webkit-box-shadow: inset 0 0 7px #000;
    box-shadow: inset 0 0 7px #000;

    border: 1px solid gold;
}

...仅适用于 Chrome 和 Firefox（不适用于 IE8）。

我试过了，据说可以在 IE8 中使用：

#imgPostTravel:hover {
  zoom: 1;
  filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5, Color=#ff0000);
}

...但它不起作用（不向 IE8 添加框阴影）。

我能做些什么来让 box-shadow 在 IE8 中工作？

Answer 1

你可以试试@thirtydot 的回答：

在旧版本的 IE 中使用 CSS3 PIE, which emulates some CSS3 properties。

它支持box-shadow（except for inset关键字）。

编辑:

或者您可以试试@Marcus Pope 的回答：

filter: 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=0,strength=5), 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=45,strength=2), 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=90,strength=5), 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=135,strength=5), 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=180,strength=10), 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=225,strength=5), 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=270,strength=5), 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=315,strength=2);

可能与
重复 Box shadow in IE7 and IE8
CSS3 Box Shadow Effect for IE8?

Answer 2

您正在尝试在 Internet Explorer 5.5 到 8 中制作一个内嵌框阴影。

这是完全有可能的。

这是一个带有解释的代码示例：

（这只会在 Internet Explorer 5.5 - 8 中正确显示）：

#box {
/* Make sure to set it to min-width so you can push the outside "Microsoft Shadow" out of the screen to the left, right, bottom, and top, because the shadow adds pixels to the 100% width whether you set it to width:100% or not, but if you set it to 100% width, you won't be able to make the margin push the outside shadow out. */
  min-width: 100%;
  /* For some reason, the above rule is not the case for height. I'm not sure why for Internet Explorer. */
  height:100%;
  position: relative;
  /* I discoverd the shadow won't even appear unless there is a boder of the same div. That's no big deal, just push the boder out too, along with the bleeding outside Mirosoft Shadow". */
  border: solid 1px black;
  zoom: 1;
  filter: progid:DXImageTransform.Microsoft.Shadow(Color=#aaaaaa, Strength=33, Direction=0),
         progid:DXImageTransform.Microsoft.Shadow(Color=#aaaaaa, Strength=33, Direction=90),
         progid:DXImageTransform.Microsoft.Shadow(Color=#aaaaaa, Strength=33, Direction=180),
         progid:DXImageTransform.Microsoft.Shadow(Color=#aaaaaa, Strength=33, Direction=270);
/* For the child, (child id is called "box")... you can only push out the content to the bottom and right, because of the natural left to right, top to bottom HTML layout. */
  margin-bottom: -39px;
  margin-right:130px;
}
.box-parent-fix {
/* This appears to be a hack as far as I know, the bleeding Microsoft Shadow (not the inset part, the outside part is what I'm talking about) will only be pushed out if it has a parent with the follow CSS: */
    position: relative;
    min-width: 100%;
    height: 100%;
}
.box-parent {
/* For the child, (child id is called "box")... you can only push out the content to the bottom and right, because of the natural left to right, top to bottom HTML layout. */
    margin-top:-49px;
    margin-left:-45px;
    height:100%;
    min-width:100%;
    background-color: white;
    position: relative;
}
body {
    position: relative;
    height: 100%;
    min-width:100%;
/* This hides the pushed out bleeding non-inset Microsoft Shadow. Please excuse my ugly sentence, haha. */
    overflow-y: hidden;
    overflow-x: hidden;
}

<body>
    <div class="box-parent-fix">
        <div class="box-parent">
            <div id="box">
 
            </div>
        </div>
    </div>
</body>

这是它在 Internet Explorer 6 中运行的屏幕截图：

这是它在 Internet Explorer 8 中运行的屏幕截图：

是否可以在 IE8 中使用 box-shadow？

Is it possible to use box-shadow in IE8?

css

internet-explorer-8

hover

dropshadow

box-shadow