css - IE CSS 转换中的一个像素问题

Question

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

但是，在 IE 9-11 中似乎存在舍入问题。在某些高度，背景图像中有一个像素显示在倾斜 block 下方，导致以下结果:

在我的例子中，横幅是窗口总高度的百分比。这是应该能够重现问题的一些示例代码:

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

是的，这似乎是一个四舍五入的问题——而且我不知道可以做些什么来解决这个问题。由于百分比值的性质，它们并不总是产生完整的像素值——恐怕在这些情况下如何舍入取决于浏览器供应商。

我只能为您提供一个可能的解决方法(resp。“掩盖”)似乎有效 - 如果布局真的像这样简单，并且主要内容区域有白色背景，并且那里不涉及透明度或背景图像。

将部分“向上”拉过横幅 -1px 的负边距(这里也消除了 h1 的上边距，否则它与该部分的上边距相邻——由 padding-top 抵消)，这样它的背景只是掩盖了那个小故障:

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

好吧，如果你仔细观察，在出现舍入毛刺的情况下，三 Angular 形的 Angular 看起来会稍微“被切断”(一个像素)——如果你能忍受这种情况(并且你想要的布局允许它) )，然后接受它 :-)(也许​​只能通过某种方式将它提供给 IE)。如果没有 - 那么抱歉，无法帮助您。