1

为什么这个 CSS 在框架/环境/浏览器中的应用不一致？

我在 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;
}

它工作正常 - 在 mouseenter / 悬停在图像中时，它会产生金色的五点钟阴影。

但是，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 添加框阴影）。

我能做些什么让盒子阴影在 IE8 中工作？

4

2 回答 2

1

你可以试试@thirtydot 答案：

使用CSS3 PIE，它模拟旧版本 IE 中的一些 CSS3 属性。

它支持box-shadow（除了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);


IE7 和 IE8中的盒子阴影可能重复IE8 的
CSS3 盒子阴影效果？

于 2015-10-01T00:54:19.347 回答
1

您正在尝试在 Internet Explorer 5.5 到 8 中制作一个嵌入的 boxshadow。

这是完全可能的。

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

（这只会在 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 中运行的屏幕截图： 在此处输入图像描述

于 2018-09-21T13:48:24.737 回答