小编Dav*_*veE的帖子

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

在大多数浏览器中,widgetDIV具有白色背景和白色左右框阴影,这些阴影填充浏览器窗口的宽度,没有空格,破坏或红色从包装中流过.在IE11中,有一条1px的红线沿着widgetDIV 的左侧垂直延伸.

看一下这个小提琴的例子:http://jsfiddle.net/Bxsdd/.(您可能需要手动调整小提琴结果窗格的宽度,因为窗口宽度的细微差别更明显地显示问题 - 再次,仅在IE11中.)

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

• 将box-shadow使用更改em's为使用px's
• 从其他box-shadow属性中添加或减去1px
• 在widgetDIV 周围添加边框
• 调整padding,display,position窗口小部件和其他元素的CSS
• 我现在甚至都记不起那么多东西

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