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

Question

我在我的网站上使用了一个基本列表，它可以在FF和IE中正常工作。但是，Chrome浏览器缺少一行像素。

JsFiddle感谢Jared的评论。

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

任何想法的问题来源？

截图：

灰色线跳到一个像素。

Answer 1

中发现的主要问题：

• 在某些屏幕尺寸，所述dt和dd，再加上水平边距和填充的宽度，可以增加高达100％以上的每一行。最安全的方法是使用％值作为宽度，以及水平边距和填充，而不是em。
• 使用边距将dd标签放置在与dt标签相同的行上会产生问题。实现布局的更安全的方法是浮动每个dt和dd标记，并为每个dt标记指定clear:both。使用边距可以正确地做到这一点，但浮动元素要简单得多。

Updated demo。 （注：该演示一直没有任何边缘或填充添加到它的dt和dd的宽度应由然而许多被添加到水平边缘或填充被减少。。）

---

发现轻微的字体问题：

什么是一致的

• 没有指定了，所以使用默认衬线字体。
• 没有指定font-size，所以默认使用16px。
• line-height:2em是两倍的字体大小，这是两次16px的，这是32PX（由灰色第一线的高度示出。
• 灰度第一行的高度在器和Firefox是32PX。

什么是不相符的

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

可避免什么

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

无法避免

什么即便如此但是，仍然会有文字如何呈现一些不一致的地方。在文本使用的行高空间内，文本的位置在浏览器到浏览器之间通常会至少变化1px。这不是可以预防的。这是操作系统恰好在该特定浏览器中将该特定font-family与该特定font-size与该特定line-height一起呈现的结果。但通过始终指定一个明确的line-height（这种情况已经完成），可以最小化不一致性。

摘要

选择一个font-family，一个font-size和line-height有助于最大限度地减少矛盾。但除此之外，文本中总是会有不可避免的不一致之处。互联网上的每个网站都有一些这样的内容。它通常不是很明显。