小编Cha*_*tte的帖子

为什么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>
Run Code Online (Sandbox Code Playgroud)
在Chrome中,第一行比另一行长,但在其他浏览器中,行的长度相同.即使添加normalize.css也无济于事.
为什么会发生这种情况,有没有办法在chrome中修复它,所以线条长度相同？
html css google-chrome font-family
Cha*_*tte
2018 07-12
8
推荐指数
1
解决办法
140
查看次数