html - 为什么一个 div 比具有相同内容的几个 span 长(仅在 Chrome 中)

我有两行 10000 "."等宽字体。第一个在 div 中有整行，第二个由 1000 个跨度组成，每个跨度为 10 个“.”。这是 JS fiddle 链接:https://jsfiddle.net/fojp5e9z/2/

这里有 5000 个字符，最后有点明显。在 10000 时，您会在顶行获得 2 个完整周期的额外长度。

<!DOCTYPE html><html><body>
<div style='font-family:monospace'>
........................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................
</div>
<div style='font-family:monospace'>
<span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span>
</div></body></html>

在 Chrome 中，第一行比另一行长，但在所有其他浏览器中，每一行的长度都相同。即使添加 normalize.css 也无济于事。

为什么会发生这种情况，有没有办法在 chrome 中修复它，使线条长度相同？

最佳答案

我认为这是由于一些四舍五入和复杂的计算造成的。首先，这里使用梯度来更好地说明问题以查看两种情况之间的区别:

span:nth-child(odd) {
  background:green;
}
span:nth-child(even) {
  background:yellow;
}
.grad {
  background:repeating-linear-gradient(to right,green 0,green 5ch,yellow 5ch,yellow 10ch);
}
body {
  margin:0;
  font-family:monospace;
}

<div style='font-family:monospace;display:inline-block;' class="grad">
........................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................
</div>
<div style='font-family:monospace;display:inline-block;background:red;' >
<span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span><span>.....</span>
</div>

我们可以清楚地看到顶部渐变没有跟随 span 的着色。我猜这是因为等于 7.14063px 的等宽字符 (1ch) 的宽度(使用 Chrome 进行测试时)使得两种情况下的计算有所不同。

在上面的 div 中，我们将对这个值求和 5000 次，然后我们进行舍入，但在较低的 div 中，将对每个跨度(5 次)求和这个值，然后我们舍入，然后我们将再次求和并再次舍入。¹

当然，我没有任何正式的证明，但如果我们将 font-size 更改为另一个值，它将得到修复(更改 font-size 当然会改变 1ch 的值)。

这里是制作font-size:16px时的测试。

https://jsfiddle.net/1gLejzb3/20/ ²

作为旁注，在 Firefox 上测试时 1ch 等于 8px 这解释了为什么我们没有问题，因为它很容易处理整数并且对于带有字体的 ch 单元，似乎只有 chrome 可以使用非整数值。所以同样的问题也可能发生在其他font-family上。

为了避免这种情况，最好依靠在所有浏览器中表现相同的字体。对于等宽字体，我通常依赖 Inconsolata .它的 1ch 在所有浏览器中(甚至在 chrome 中)默认等于 8px。

https://jsfiddle.net/1gLejzb3/23/ ²

有了这个font-family，1ch 单位将等于font-size 的一半，所以16px将给出 8px，17px 将给出 8.5px(对于 Fierfox 它将是 8px)等等。如果您避免 chrome 中的奇数值，您就不会有问题。

^{1:这是一个简单的猜测，因为我不知道浏览器在每种情况下如何处理计算。}
^{2:我正在使用 JSfiddle，因为我已达到答案中的字符数限制。}

关于html - 为什么一个 div 比具有相同内容的几个 span 长(仅在 Chrome 中)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51294240/

html - 为什么一个 div 比具有相同内容的几个 span 长(仅在 Chrome 中)

上一篇：javascript - 如何在 React Table 中使一些列左对齐和一些列居中对齐 - React

下一篇：javascript - 如何在 html5/ionic 中使用平方米或平方公里