关闭IE CSS转换中的一个像素问题

Question

我正在使用transform: skew使用:before和:after tags在我的横幅图片上创建向下箭头的效果。结果应如下所示：

然而，在IE 9-11中似乎存在舍入问题。在某些高度处，背景图像中有一个像素显示在倾斜的块下方，从而产生以下结果：

在我的情况下，横幅是窗口总高度的百分比。以下是一些应该能够重现问题的示例代码：

HTML

<div id="main">
    <div id="banner"></div>
    <section>
        <h1>...</h1>
        <p>...</p>
    </section>
</div>

CSS

#banner {
    position: relative;
    background-color: green;
    width: 100%;
    height: 75%;
    overflow: hidden;
}

#banner:before,
#banner:after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    width: 50%;
    height: 1.5em;
    background-color: #FFFFF9;
    transform: skew(45deg);
    transform-origin: right bottom;
}

#banner:after {
    right: 0;
    transform: skew(-45deg);
    transform-origin: left bottom;
}

body {
    background-color: #333;
    position: absolute;
    width: 100%;
    height: 100%;
}

#main {
    max-width: 40em;
    margin: 0 auto;
    background-color: #FFFFF9;
    position: relative;
    height: 100%;
}

section {
    padding: 0 1em 5em;
    background-color: #FFFFF9;
}

这里是working example。

Answer 1

是的，似乎是一个四舍五入的问题 - 我不知道有什么办法可以解决这个问题。这是百分比值的本质，它们并不总是产生完整的像素值 - 在这些情况下如何进行舍入取决于浏览器供应商，我担心。

我只能为你提供一个似乎有用的解决方法（分别称为“掩盖”） - 如果布局真的很简单，主要内容区域有白色背景，并没有涉及透明度或背景图像。

在横幅上“向上”拉出-1px的负边距（此处也消除了h1的上边距，否则它与该部分的上边距相邻 - 由填充顶部反击），以便它的背景只是掩盖了一点小故障：

section {
  padding: 1em 1em 5em;
  background-color: #FFFFF9;
  position:relative;
  margin-top:-1px;
}    
section h1:first-child { margin-top:0; }

好吧，如果你仔细观察一下，在发生圆角毛刺的情况下，这会使三角形的边缘略微“切断”（一个像素） - 如果你可以忍受（并且你想要的布局允许它） ），然后把它:-)（并且可能只通过某种方式将其提供给IE）。如果没有 - 那么抱歉，无法帮助你。