首页 文章

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

提问于
浏览 次
16

我正在使用CSS box-shadow 模仿"bleeds"到浏览器窗口边缘的背景 . 它在Chrome，Firefox，Safari和Internet Explorer 9和10中运行良好 . 但是，Internet Explorer 11在左（负）框阴影之前呈现透明的1px "space" .

拿这个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 属性中添加或减去1px

  • 在 widget DIV周围添加边框

  • 调整小部件的 padding ， display ， position 和其他CSS元素

  • 我现在甚至都记得很多事情

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

css css3 internet-explorer-11

7 回答

  • 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;
    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上设置负边距 .

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

    回复于
  • 0

    THE PROBLEM:

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

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

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

    WHAT (PRETTY MUCH) WORKED FOR ME (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将它们视为重复错误并忽略它们 .

    THE "PRETTY MUCH" PART (FOR ME):

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

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

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

    我希望这对于你（读者）在类似的其他场景中有用，但我还没有测试过 .

    祝你好运，让我们感谢好IE浏览器的“挑战”！ ;）

    回复于
  • 6

    我想我会分享我对这个问题的回答 . 我不能确定我和其他人有同样的问题，但我观察到的是：当设置宽度为像素的元素时，问题出现在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上执行脚本将是最佳的 . 请原谅我的脚本，因为这是我的第一个取得了 . 请随时纠正任何问题 . 这解决了我的问题;我希望有人觉得它有用！

    回复于
  • 0

    你可以用轮廓填充空间：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>
    回复于
  • 6

    戴夫给了一个很好的解决方案 . 我自己也玩过这个 . 我有一个关于盒子阴影的顶部和底部模糊的问题，而不是左右 . 我最终通过在顶部添加边框并使用旁边的重要部分来解决它 .

    .class
{
border-top:1px solid $colorBg !important;
border-bottom:1px solid $colorBg !important;
}

    也许不像以前的解决方案那么好，但它对我有用 .

    回复于
  • 1

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

    回复于
  • 1

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

    height:30px; -> height:30.1px;
    回复于

相关问题