Chrome中的<dl>缺少1行像素

Question

我在我的网站上使用了一个基本列表,可以正常使用FF和IE.但是,Chrome中缺少一行像素.

JsFiddle感谢Jared的评论.

如果您没有看到丢失的行,请更改缩放值,它将显示为某些值(例如,在我的PC上为90%).

知道问题的根源吗？

截图:

灰色线条跳跃一个像素.

Answer 1

发现的主要问题:

• 在某些屏幕尺寸上,每条线的宽度dt和dd加上水平边距和填充可能会增加100%以上.最安全的方法是使用%值作为宽度,以及水平边距和填充,而不是em.
• 使用边距将dd标记放在与标记相同的行上dt是有问题的.实现布局的更安全的方法是每一个浮动dt和dd标签,并指定clear:both每个dt标签.可以使用边距正确地执行此操作,但浮动元素要简单得多.

更新的演示.(注:此演示一直没有任何边缘或填充添加到它的宽度.dt和dd应由然而许多被添加到水平边缘或填充被减少.)

发现次要字体问题:

什么是一致的

• 没有font-family指定,所以serif字体使用默认值.
• 没有font-size指定,因此使用的16px的默认值.
• line-height:2em 是两倍的字体大小,是16px的两倍,即32px(由灰色第一行的高度显示).
• 在Chrome和Firefox中,灰色第一行的高度为32px.

什么不一致

• 在Chrome中,使用font-size16px 的默认serif字体渲染,基线高度为12px(大写字母H的高度).
• 在Firefox中,使用font-size16px 的默认serif字体渲染,基线高度为11px.

什么可以避免

默认的serif字体在不同的浏览器中呈现不一致.没有办法阻止这种字体这样做.但是,您可以通过选择默认serif字体以外的字体来避免一些不一致.某些字体(如Arial)在浏览器到浏览器中呈现更加一致.

什么是无法避免的

然而,即便如此,文本呈现方式仍然存在一些不一致之处.在文本使用的行高空间内,文本的位置通常在浏览器到浏览器之间至少相差1px.这不是可以预防的事情.它的操作系统情况如何渲染特定结果font-family在那个特定的font-size与特定line-height在特定的浏览器.但是,可以通过始终指定显式来最小化不一致性line-height,这在本例中已经完成.

摘要

选择a font-family,a font-size和a line-height有助于最小化不一致性.但除此之外,文本中始终存在一些无法避免的不一致.互联网上的每个网站都有一定数量.它通常不是很明显.