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

2019年8月4日 205次阅读

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

但是,在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.

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

我只能为你提供一个似乎有用的可能的解决方法(相应的“掩盖”) – 如果布局真的很简单,主要内容区域有白色背景,并且不涉及透明度或背景图像那里.

在横幅上“向上”拉出-1px的负边距(这里也消除了h1的上边距,否则它与该部分的上边缘相邻 – 由填充顶部反击),因此它的背景简单掩盖了一点小故障：

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

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

点赞