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 的上边距，否则它与部分的上边距相邻 - 由 padding-top 抵消），以便它的背景只是掩盖了那个小故障：

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

好吧，如果您仔细观察，在发生舍入故障的情况下，这会使三角形的角看起来略微“被切断”（一个像素）——如果您能忍受的话（并且您想要的布局允许它） )，然后接受它:-) （并且可能仅通过某种方式将其提供给 IE）。如果没有，那么抱歉，无法帮助您。