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>