Chrome上的CSS转换显示元素边

Question

我试图在包含跨度的div上应用scaleX变换。变换工作得很好但是当它不是统一时，跨度的边缘似乎没有接触，导致它们之间的可见线。

这是一个例子

这是一个fiddle：

  <div class="container">
    <div class="page">
      <div class="line">
        <span class="cell">A</span><span class="cell">B</span><span class="cell">C</span><span class="cell">D</span>
      </div>
    </div>
  </div>

.container {
    background-color: black;
    width: 350px;
}
.page {
    padding: 10px;
    transform: scaleX(1.2);
}
.line {
    padding-left:25px;
}
.cell {
    background-color: white;
    color: black;
    font-size: 100px;
}

将scaleX变换的值更改为1.0，边缘消失。更改为1.1然后1.2，你可以看到转换，否则似乎很好地工作。似乎是一个Chrome浏览器 - Firefox和Edge不会出现问题。我对CSS很新，所以欢迎任何建议。

Answer 1

将以下内容添加到您的单元格

-webkit-backface-visibility: hidden;

Answer 2

因此，对于内联元素来说，这是一个长期存在的怪癖。一个非常实用的解决方案是删除<span>标记的结束标记（所有浏览器都支持此标记）

同时检查此链接How to remove the space between inline-block elements?

最后，您可以使用Flexbox来解决此问题

.container {
  background-color: black;
  width: 350px;
}
.page {
 padding: 10px;
 transform: scaleX(1.3);
}
.line {
  padding-left:25px;
}
.cell {
  background-color: white;
  color: black;
  font-size: 100px;
}

  <div class="container">
    <div class="page">
      <div class="line">
        <span class="cell">A<span class="cell">B<span class="cell">C<span class="cell">D
      </div>
    </div>
  </div>