问Chrome中的<dl>缺少一行像素

EN

发现的主要问题：

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

Updated demo。(注意:此演示没有添加任何页边距或填充。无论在水平边距或填充中添加多少，dt和dd的宽度都应该减小。)

发现较小的字体问题：

什么是consistent

• No font-family已指定，因此使用默认衬线字体。
• No font-size已指定，因此默认值为16px是font -font-family的两倍，即16px的两倍，即32px (以灰色第一行的高度显示。
• 在Chrome和Firefox中灰色第一行的高度均为32px。

什么不一致

• 在Chrome中，font-size为16px的默认衬线字体以基线高度12px (大写H的高度)呈现。
• 在Firefox中，font-size为16px的默认衬线字体呈现基线高度为11px。

可以避免的事情

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

什么是不能避免的

然而，即使这样，文本的呈现方式仍然会有一些不一致之处。在文本使用的行高空间内，文本的位置通常会因浏览器的不同而变化至少1px。这不是可以预防的。这取决于操作系统如何在特定的font-size上使用特定的line-height在该特定的浏览器中呈现该特定的font-family。但是可以通过总是指定显式的line-height来最小化不一致，在这种情况下已经这样做了。

摘要

选择font-family、font-size和line-height有助于将不一致性降至最低。但除此之外，文本中总是会有一些无法避免的不一致之处。互联网上的每个网站都有一些这样的东西。这通常不是很明显。