为什么div比相同内容的多个跨度更长(仅限Chrome)

Question

为什么div比相同内容的多个跨度更长(仅限Chrome)

Cha*_*tte 8 html css google-chrome font-family

我有两行10000"." 用等宽字体.第一个是div中的整行,第二个是1000个跨度,每个10".".这是JS小提琴链接: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>

Run Code Online (Sandbox Code Playgroud)

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

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

Answer 1

Tem*_*fif 5

我认为这是由于一些舍入和复杂的计算.首先,这里是使用渐变来查看两种情况之间差异的问题的更好说明:

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;
}

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

我们可以清楚地看到顶部梯度没有遵循跨度的颜色.我想这是因为等宽的等宽字符(1ch)的宽度7.14063px(当用Chrome测试时)使得计算在两种情况下都有所不同.

在上面的div中,我们将这个值加总5000次,然后我们进行舍入,但是在下面的div中,将每个跨度的这个值相加(5次)然后我们将舍入然后我们将再次求和并再次舍入.¹

当然,我没有任何正式的证据,但如果我们改变font-size到另一个值,它将得到修复(改变font-size意志当然会改变它的价值1ch).

这是一个测试时做的font-size:16px.

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

作为旁注,当在Firefox上进行测试时,1ch等于8px解释了为什么我们没有问题,因为它很容易处理整数而且只有chrome似乎与ch带有字体的单位的非整数值一起工作.所以同样的问题也可能发生在其他问题上font-family.

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

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

有了这个font-family的1ch单位将等于一半font-size这样16px会给8px,17px会给8.5px(对Fierfox它会8px)等.如果您避免使用chrome中的奇数值,则不会出现问题.

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

归档时间：	7 年，5 月前
查看次数：	140 次
最近记录：	7 年，5 月前