css - 从 IE11 中的 CSS box-shadow 中删除 1px 透明空间？

Question

我正在使用 CSS box-shadow 来模拟“渗入”到浏览器窗口边缘的背景。它在 Chrome、Firefox、Safari 和 Internet Explorer 9 & 10 中运行良好。但是，Internet Explorer 11 在左(负)框阴影之前呈现一个透明的 1px“空间”。

拿这个 HTML:

<div class="wrapper">
    <div class="widget">Test</div>
</div>

还有这个 CSS:

.wrapper {
    background:red;
    padding:20px 0;
}
.widget {
    width:600px;
    height:400px;
    margin:0 auto;
    text-align:center;
    background:white;
    box-shadow:20em 0 0 0 white, -20em 0 0 0 white;
}

在大多数浏览器中，widget DIV 具有白色背景和白色左右框阴影，它们填充了浏览器窗口的宽度，没有空格、中断或从 wrapper 渗出的红色。在 IE11 中，widget DIV 左侧有一条垂直延伸的 1px 红线。

以这个 fiddle 为例:http://jsfiddle.net/Bxsdd/ . (您可能需要手动调整 fiddle 结果 Pane 的宽度，因为窗口宽度的细微差异会更明显地显示问题 - 同样，仅在 IE11 中。)

我尝试删除透明空间的事情:

• 将 box-shadow 从使用 em's 更改为使用 px's
• 从其他 box-shadow 属性中添加或减去 1px
• 在 widget DIV 周围添加边框
• 调整小部件的padding、display、position和其他CSS元素
• 很多事情我现在都想不起来了

关于如何在 IE11 中删除 1px 透明空间的任何想法？

Answer 1

现在我们知道这是一个错误，这里是一个可接受的解决方法:

.widget {
    width:600px;
    height:400px;
    margin:0 auto;
    text-align:center;
    background:white;
    box-shadow:20em 0 0 0 white, -20em 0 0 0 white;
    position:relative;
    z-index:2;
}
.widget:before, .widget:after {
    position:absolute;
    content: " ";
    width:1em;
    left:-1em;
    top:0;
    height:100%;
    background:white;
    z-index:1;    
}
.widget:after {
    left:auto;
    right:-1em;
}

基本上，我添加了绝对定位的 :before 和 :after 伪元素，它们只包含与 widget 相同的背景颜色> DIV 和那个 DIV 的 box-shadow。这些伪元素正好偏移到 widget DIV 的外侧和右侧，并位于它的后面，以便它们为 box-shadow 出血提供正确的颜色通过。

如果已经在使用 :before 和 :after 元素，显然这会增加复杂性，但这对我的目的有用。我想人们也可以尝试在 widget DIV 上设置负边距。

在这里查看 fiddle :http://jsfiddle.net/TVNZ2/