html - 1 行像素缺失在铬

Question

我在我的网站上使用了一个基本列表，它适用于 FF 和 IE。但是，Chrome 缺少一行像素。

JsFiddle感谢 Jared 的评论。

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

知道问题的根源吗？

截屏：

灰线跳跃一个像素。

Answer 1

发现的主要问题：

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

更新了演示。（注意：这个演示没有添加任何边距或填充。无论向水平边距或填充添加多少，和的宽度都dt应该dd减小。）

---

发现小字体问题：

什么是一致的

• 没有font-family指定，所以使用默认的衬线字体。
• 没有font-size指定，所以使用默认值 16px。
• line-height:2em是 font-size 的两倍，也就是 16px 的两倍，也就是 32px（由灰色第一行的高度表示。
• 在 Chrome 和 Firefox 中，灰色第一行的高度都是 32px。

什么不一致

• 在 Chrome 中，a 为 16 像素的默认衬线字体以font-size12 像素的基线高度（大写字母 H 的高度）呈现。
• 在 Firefox 中，默认 serif 字体的 afont-size为 16px，其基线高度为 11px。

什么可以避免

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

什么是无法避免的

然而，即便如此，文本呈现方式仍会存在一些不一致。在文本使用的行高空间内，文本的位置通常会因浏览器而异，至少相差 1px。这不是可以预防的。这是操作系统碰巧在那个特定的浏览器中呈现那个特定font-family的那个特定font-size的结果的结果。line-height但是可以通过始终指定显式来最小化不一致line-height，这在这种情况下已经完成。

概括

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