html – 为什么div的长度超过几个跨度且内容相同(仅限Chrome)

前端之家收集整理的这篇文章主要介绍了html – 为什么div的长度超过几个跨度且内容相同(仅限Chrome)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有两行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>

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

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

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

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

这是在制作font-size时的测试:16px.

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

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

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

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

使用这个font-family,1ch单位将等于字体大小的一半,因此16px将提供8px,17px将提供8.5px(对于Fierfox,它将为8px),依此类推.如果您避免使用chrome中的奇数值,则不会出现问题.

1:这是一个简单的猜测,因为我不知道浏览器如何在每种情况下处理计算.

2:我正在使用JSfiddle,因为我已经达到答案中的字符限制.

猜你在找的HTML相关文章