从IE11中的CSS框阴影中删除1px透明空间? [英] Remove 1px transparent space from CSS box-shadow in IE11?

问题描述

我正在使用CSS box-shadow来模仿出血"到浏览器窗口边缘的背景.它在Chrome，Firefox，Safari和Internet Explorer 9& 10.但是，Internet Explorer 11在左(负)框阴影之前呈现了一个透明的1px空格".

I'm using CSS box-shadow to mimic a background that "bleeds" to the edges of the browser window. It works great in Chrome, Firefox, Safari, and Internet Explorer 9 & 10. However, Internet Explorer 11 renders a transparent 1px "space" before the left (negative) box-shadow.

使用此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具有白色背景和白色左&右框阴影填充了浏览器窗口的宽度，没有任何空格，中断或包装程序溢出的红色.在IE11中，有一条1px的红线沿widget DIV的左侧垂直延伸.

In most browsers, the widget DIV has a white background and white left & right box shadows that fill the width of the browser window with no spaces, breaks or red from the wrapper bleeding through. In IE11 there is a 1px red line that runs vertically along the left side of the widget DIV.

以这个小提琴为例: http://jsfiddle.net/Bxsdd/. (您可能需要手动调整小提琴结果窗格的宽度，因为窗口宽度的细微差别更明显地显示了问题-同样，仅在IE11中如此.)

Take a look at this fiddle for an example: http://jsfiddle.net/Bxsdd/. (You may need to manually adjust the width of the fiddle Results pane as slight differences in the width of the window show the issue more apparently - again, only in IE11.)

我尝试删除透明空间的内容:

Things I've tried to remove the transparent space:

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

• Changing the box-shadow from using em's to using px's
• Adding or subtracting 1px from the other box-shadow attributes
• Adding a border around the widget DIV
• Adjusting the padding, display, position and other CSS elements for the widget
• So many things I can't even remember right now

有什么想法如何删除IE11中的1px透明空间?

Any ideas how to remove the 1px transparent space in IE11?

推荐答案

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

Now that we know it's a bug, here's one acceptable workaround:

.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渗漏提供正确的颜色.

Basically, I'm adding absolutely positioned :before & :after pseudo elements that contain nothing more than the same background color as the widget DIV and that DIV's box-shadow. These pseudo elements are offset just to the outside-left and outside-right of the widget DIV and positioned behind it so that they provide the correct color for the box-shadow bleed through.

很明显，如果已经在使用:before& :after元素，但这对我有用.我想也可以尝试在widget DIV上设置负边距.

Obviously this adds complication if one is already using the :before & :after elements, but this works for my purposes. I suppose one could also try setting negative margins on the widget DIV.

在此处签出小提琴: http://jsfiddle.net/TVNZ2/

这篇关于从IE11中的CSS框阴影中删除1px透明空间?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！