Question

我非常需要IE8的嵌入式boxshadow，而无需JavaScript。

这是屏幕截图：

因为Internet Explorer 5.5到8仅支持Microsoft的“阴影”和“阴影”而不是盒子阴影，所以我必须使用以下代码：

#box {
  /* CSS for all browsers.  Note if there is no background-color, the box will be transparent */
  border: solid 1px #808080;
  margin: 10px;
  padding: 10px;
   zoom: 1;
   filter: progid:DXImageTransform.Microsoft.Shadow(Color=#ececec, Strength=33, Direction=0),
         progid:DXImageTransform.Microsoft.Shadow(Color=#ececec, Strength=33, Direction=90),
         progid:DXImageTransform.Microsoft.Shadow(Color=#ececec, Strength=33, Direction=180),
         progid:DXImageTransform.Microsoft.Shadow(Color=#ececec, Strength=33, Direction=270);
}

<body>
    <div id="box">

    </div>
</body>

（阴影仅在IE5.5到8中显示，因为阴影和下拉阴影已从IE9中删除，由boxshadows代替）。

我可以通过以下方法从盒子内部去除阴影：

#box {
  /* CSS for all browsers.  Note there is now a background-color, the box will not be transparent */
  background-color:white;
  border: solid 1px #808080;
  margin: 10px;
  padding: 10px;
   zoom: 1;
   filter: progid:DXImageTransform.Microsoft.Shadow(Color=#ececec, Strength=33, Direction=0),
         progid:DXImageTransform.Microsoft.Shadow(Color=#ececec, Strength=33, Direction=90),
         progid:DXImageTransform.Microsoft.Shadow(Color=#ececec, Strength=33, Direction=180),
         progid:DXImageTransform.Microsoft.Shadow(Color=#ececec, Strength=33, Direction=270);
}

<body>
    <div id="box">

    </div>
</body>

然后看起来像这样：

但是我怎么能只在外部阴影消失的地方插入创建阴影？

Answer 1

根据我的搜索，我发现您可以仅使用CSS来创建其他阴影，但是我没有任何有关创建内嵌阴影的文档。

我找到了一些在IE 8中创建嵌入阴影的教程，但是这些教程使用的是您不想使用的javascript。

除此之外，我没有任何方法仅在IE 8中使用CSS创建插入阴影。

如果可能的话，您可以尝试避免使用嵌入阴影，而使用IE支持的任何其他阴影。

Answer 2

经过数小时的调整，我找到了解决方案。

仅当您要将插入阴影的div推到屏幕边缘时才有效。可能有一种方法可以使其工作而不必使用屏幕边缘隐藏非插入阴影，但是我不确定如何。

对我来说很幸运，我的网站没什么好担心的。

这是最终结果的图片：

代码如下：

#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;
  /* This code is for the Microsoft Shadow (boxshadow for Internet Explorer 5.5 through 8 alternative). Please note how there needs to be a seperate shadow for each direction, starting at zero degrees and the last direction is 270 degrees. */
  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:-44px;
    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. The inset shadow isn't hidden because it's inside the screen.*/
    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 8的嵌入式boxshadow替代品

2 个答案: