Internet Explorer 8 的 Inset boxshadow 替代品

Question

我非常接近获得 IE8 的嵌入式 boxshadow 而无需 JavaScript。

这是截图：

因为 Internet Explorer 5.5 到 8 只支持微软的 "dropshadows" 和 "shadows" 而不是 boxshadows，我不得不使用这个代码：

#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>

然后看起来像这样：

但是我怎样才能制作 inset 阴影 only，其中外面的影子不见了？

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 的 Inset boxshadow 替代品

Inset boxshadow alternative for Internet Explorer 8

html

css

internet-explorer-8

box-shadow