Question

我正在使用CSS box-shadow模仿一个“渗透”到浏览器窗口边缘的背景。它适用于Chrome，Firefox，Safari和Internet Explorer 9＆amp; 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的背景为白色，左侧为白色。右侧框阴影填充浏览器窗口的宽度，没有空格，破坏或红色从包装器流血。在IE11中，有一条1px红线沿着widget DIV的左侧垂直延伸。

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

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

将box-shadow从使用em's更改为使用px's
从其他box-shadow属性
在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＆amp; :after个伪元素只包含与widget DIV相同的背景颜色和DIV的box-shadow。这些伪元素仅偏移到widget DIV的左外侧和右外侧，并位于它后面，以便它们为box-shadow出血提供正确的颜色。

显然，如果已经使用:before＆amp; :after元素，但这适用于我的目的。我想也可以尝试在widget DIV上设置负边距。

点击这里的小提琴：http://jsfiddle.net/TVNZ2/

Answer 2

问题：

这似乎是一个渐变的Alpha透明度/锯齿问题，与偶数/奇数像素化计算有关。

正如我所知道的那样，颜色正在溢出到那个像素行，但抗锯齿计算正在剥离其alpha值，试图尝试研究盒子阴影与其周围的区别。

在盒子阴影的外边框上没问题，但在内边框不太好 - 这就是为什么我们都在这里！

为我（纯粹的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浏览器的“挑战”！ ;）

Answer 3

我以为我会分享这个问题的答案。我不能确定我和其他人一样有同样的问题，但我观察到的是：当设置宽度为像素的元素时，问题出现在EI11（以及EI10根据我未测试的其他方面）以margin: auto;为中心（我的案例是左/右问题）。我注意到在调整大小时，div会在屏幕的每个其他像素宽度上移动到右边1px。

我使用透明背景来观察，而不是只是左边出现间隙，div实际上向右移动了1px。

更改div 1px的宽度对当前屏幕宽度有效。但是，更改屏幕宽度会使每个其他像素都出现问题。

要解决此问题，我们需要将屏幕宽度标识为偶数或奇数。在我的情况下，即使我添加了一个css规则给我的罪魁祸首div。新规则将左侧定位更改为0.5px。

此外，需要在屏幕调整大小时执行该功能。

以下是我用来解决问题的脚本：

(function (window, document) {
  function isEven() {
      var windowWidth = window.innerWidth;
  // Find out if size is even or odd 
  if (windowWidth % 2 === 0) {
    document.querySelector("#container").classList.add("container_left_1px");
  } else {
    document.querySelector("#container").classList.remove("container_left_1px");
  }
};
document.addEventListener("DOMContentLoaded", isEven);
window.addEventListener(('onorientationchange' in window) ? 'orientationchange':'resize', isEven);
})(this, this.document);

和css规则

.container_left_1px {left: .5px;}

仅在EI10和11上执行脚本才是最佳选择。请原谅我的脚本，因为这是我制作的第一个js。请随时纠正任何问题。这解决了我的问题;我希望有人觉得它有用！

Answer 4

你可以用轮廓填充空间：1px纯色;它对我有用。

.container{
  display:block;
  position: relative;
  width:450px;
  height:450px;
  margin: 0 auto;
  background-color: #654d7f; 
}

.header-emphasis{
  position: absolute;  
  bottom:5px;
  max-width: 420px
}
span{
  position: relative;
  left:8px;
  background-color: white;
  padding:4px 4px 4px 0px;
  color: #666666;
  box-shadow: 6px 1px 0px 2px #ffffff, -8px 1px 0px 2px #ffffff;
  outline: 1px solid white;
}

<div class="container">
  <h3 class="header-emphasis">
    <span class="highlight">
      If there are no dogs in heaven then when i die i want to go         where they went.
    </span>
  </h3>
</div>

Answer 5

找到这个解决方案（Small space between box shadow and div when alpha set），它对我有用：div宽度必须是奇数。宽度：800px; =＆GT;不工作，但宽度：799px; =＆GT;工作和白色差距消失了！

Answer 6

在我的情况下，我在div底部和阴影之间有一条白线，我解决了向div添加高度的问题：

height:30px; -> height:30.1px;

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

6 个答案: