css - Firefox 中转换元素上出现 1px 间隙 - 亚像素舍入问题

Question

将转换属性添加到 div 似乎会使 Firefox 将宽度值四舍五入到最接近的数字，从而使列之间出现间隙。

我制作了一个 jsFiddle 示例。在各种浏览器中调整窗口大小，div 之间会出现和消失间隙。这不会发生在 Chrome Safari 或 IE 中。

http://jsfiddle.net/afz79xmr/

这是错误还是我遗漏了一些特殊 css 属性？

---

所需代码

body{
    margin:0;
}
.item{
    transform:skewY(2deg);
    transition: transform .6s ease,  background .6s ease;
    width: 20%;
    height: 50px;
    float:left;
    background: red;
}

.item:hover{
    transform:skewY(5deg);
    background: darkblue;
}

<div class="wrap">
    <div class="item">a</div>
    <div class="item">b</div>
    <div class="item">c</div>
    <div class="item">d</div>
    <div class="item">e</div>
</div>
<br />
<h1>resize my window</h1>

Answer 1

经过大量测试后，我通过添加这行 CSS 设法解决了我的问题:

border-right: 1px solid transparent;    

See here for the updated jsfiddle .

body {
  margin: 0;
}
.item {
  transform: skewY(2deg);
  transition: transform .6s ease, background .6s ease;
  backface-visibility: hidden;
  width: 20%;
  height: 50px;
  top: -20px;
  position: absolute;
  background: red;
  border-right: 1px solid transparent;
}
.a {} .b {
  left: 20%;
}
.c {
  left: 40%;
}
.d {
  left: 60%;
}
.e {
  left: 80%;
}
.item:hover {
  transform: skewY(4deg);
  background: darkblue;
}

<div class="wrap">
  <div class="a item">a</div>
  <div class="b item">b</div>
  <div class="c item">c</div>
  <div class="d item">d</div>
  <div class="e item">e</div>
</div>
<br />
<h1>resize my window</h1>

更新

此后我注意到此解决方法会产生一些问题:

1. 扰乱其他浏览器
2. Border-right 使 .item 溢出其容器

我的解决方案是将所有内容都移到 firefox 中“at-rule”

@-moz-document url-prefix() {
    .item{
        border-right: 1px solid transparent;
    }
    .item:last-of-type{
        border-right: 0;
    }    
}

See here for the updated jsfiddle .

body {
  margin: 0;
}
.item {
  transform: skewY(2deg);
  transition: transform .6s ease, background .6s ease;
  backface-visibility: hidden;
  width: 20%;
  height: 50px;
  top: -20px;
  position: absolute;
  background: red;
}

@-moz-document url-prefix() {
  .item {
    border-right: 1px solid transparent;
  }
  .item:last-of-type {
    border-right: 0;
  }
}

.b {
  left: 20%;
}
.c {
  left: 40%;
}
.d {
  left: 60%;
}
.e {
  left: 80%;
}
.item:hover {
  transform: skewY(4deg);
  background: darkblue;
}

<div class="wrap">
  <div class="a item">a</div>
  <div class="b item">b</div>
  <div class="c item">c</div>
  <div class="d item">d</div>
  <div class="e item">e</div>
</div>
<br />
<h1>resize my window</h1>