css - -webkit-clip-path 滚动条出现时 chrome 中的神秘行

Question

当在 Google Chrome 中使用 -webkit-clip-path 创建倾斜的边框效果时，等宽背景元素的神秘 strip 仅在滚动条存在时可见。

带滚动条:

没有滚动条:

我在计算样式中看不到任何会导致这种情况的内容。有没有一种方法可以始终如一地实现所需的外观(没有线条)？最好不要使用一些伪/绝对定位元素来隐藏它。

代码(http://codepen.io/anon/pen/EKmYgP):

.container {
  background: #ff0000;
  width: 400px;
  margin: 0 auto;
}
.block {
  background: #fff;
  height: 400px;
  -webkit-clip-path: polygon(0px 20%, 100% 0px, 100% 100%, 0px 100%)
}

<div class="container">
  <div class="block"></div>
</div>

Answer 1

您可以使用以下代码段隐藏此行。

.container {
  background: #ff0000;
  width: 400px;
  margin: 0 auto;
}
.block {
  background: #fff;
  height: 400px;
  -webkit-clip-path: polygon(0px 20%, calc(100% + 1px) 0px, calc(100% + 1px) 100%, 0px 100%);
  
  /** or this... 
  -webkit-clip-path: polygon(0px 20%, 101% 0px, 101% 100%, 0px 100%);
  */
}

<div class="container">
  <div class="block"></div>
</div>

如果您删除 .container 的 margin:0 auto;，该行也会消失(没有更改 -webkit-clip-path )!

解释:margin 上的 auto 值创建了这条红线，因为右边距是一个 float ，如 0.5px。但是谷歌浏览器不能画半线。因此边距会向下舍入到下一个，而不是 float 值 0.0px 并且 .container 会被拉伸(stretch)。其他浏览器四舍五入到 1.0px 并且该行没有出现。

容器的外面是这样的:

.container {
  background: #ff0000;
  width: 400px;
  margin: 0 auto;
}
.block {
  background: #fff;
  height: 400px;
  -webkit-clip-path: polygon(0px 20px, 100px 0px, 100px 100px, 0px 100px);
}

<div class="container">
  <div class="block"></div>
</div>

所以你看到右边红色区域的1px!