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

Question

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

JsFiddle感谢Jared的评论。

如果您没有看到丢失的行，请更改缩放值，它将显示为某些值（例如，在我的电脑上为90％）。

对问题的根源有什么看法？

截图：

一个像素的灰线跳跃。

Answer 1

发现的主要问题：

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

Updated demo。 （注意：此演示没有添加任何边距或填充。dt和dd的宽度应该减少，但是水平边距或填充添加了很多。 ）

---

发现次要字体问题：

什么是一致的

• 未指定font-family，因此使用默认的serif字体。
• 未指定font-size，因此使用默认值16px。
• line-height:2em是字体大小的两倍，是16px的两倍，即32px（由灰色第一行的高度显示。
• Chrome和Firefox中灰色第一行的高度为32px。

什么不一致

• 在Chrome中，font-size为16px的默认serif字体呈现的基线高度为12px（大写字母H的高度）。
• 在Firefox中，font-size为16px的默认serif字体渲染，基线高度为11px。

可以避免什么

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

什么是不可避免的

然而，即便如此，文本渲染方式仍然存在一些不一致之处。在文本使用的行高空间内，文本的位置通常在浏览器到浏览器之间至少相差1px。这不是可以预防的事情。这是操作系统如何在特定浏览器中使用特定font-family在特定font-size处呈现特定line-height的结果。但是，通过始终指定一个明确的line-height可以最大限度地减少不一致性，在这种情况下已经完成了。{/ p>

<强>摘要

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