从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;
}

在大多数浏览器中,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透明空间？

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伪元素只包含与widgetDIV和DIV 相同的背景颜色box-shadow.这些伪元素仅偏移到widgetDIV 的左外侧和右外侧,并位于它后面,以便它们为box-shadow出血提供正确的颜色.

显然,如果已经使用了:before&:afterelements,这会增加复杂性,但这适用于我的目的.我想也可以尝试在widgetDIV 上设置负边距.

在这里查看小提琴:http://jsfiddle.net/TVNZ2/

Answer 2

问题:

这似乎是一个渐变的alpha透明度/混叠问题,与偶数/奇数像素化计算有关.

我可以说,颜色正在溢出到像素行,但抗锯齿计算正在剥离其alpha值,试图尝试研究盒子阴影与其周围的区别.

在盒子阴影的外边界上很好,但在内部边界不是很好 - 这就是为什么我们都在这里!

什么(多少)为我工作(PURE CSS):

在我的用例中,通过添加几个额外的框阴影(具有不同和较小的值)来修复此问题,如下所示:

div {box-shadow: 10px 0px 0px 0px red, 
                 4px 0px 0px 0px red, 
                 3px 0px 0px 0px red, 
                 1px 0px 0px 0px red;}

虽然不优雅,但这会累积增加内部像素线的"溢出".需要大约三个额外的盒阴影才能达到所需的值 - 这表明抗锯齿溢出设置为约25%.不同的设备密度可能会改变吗？

简单地重复相同的盒子阴影不起作用 - 所以我猜IE将它们视为重复错误并忽略它们.

"PRETTY MUCH"部分(对我来说):

在我的用例中,我在文本跨度的右侧添加了一个纯粹的水平框阴影,如果线条断裂并变成多行,则会产生填充的印象.我没有在顶部或底部或div周围添加阴影.

对我来说,"相当多"的部分是在一定宽度的像素线的顶部和底部有一个大约1px或2像素的垂直溢出"点".基本上,上面相反的问题是相反的.

不理想,但远比整线透明更好.

我希望这对你(读者)在类似的其他场景中有用,但我没有测试过.

祝你好运,让我们感谢好IE浏览器的"挑战"!;)