我在我的网站上使用了一个基本列表,它适用于 FF 和 IE。但是,Chrome 缺少一行像素。
JsFiddle感谢 Jared 的评论。
如果您没有看到缺失的行,请更改缩放值,它将显示为某些值(例如在我的 PC 上为 90%)。
知道问题的根源吗?
截屏:
灰线跳跃一个像素。
我在我的网站上使用了一个基本列表,它适用于 FF 和 IE。但是,Chrome 缺少一行像素。
JsFiddle感谢 Jared 的评论。
如果您没有看到缺失的行,请更改缩放值,它将显示为某些值(例如在我的 PC 上为 90%)。
知道问题的根源吗?
截屏:
灰线跳跃一个像素。
发现的主要问题:
dt
在某些屏幕尺寸上,和的宽度dd
,加上水平边距和内边距,每行加起来可能超过 100%。最安全的方法是对宽度以及水平边距和填充使用 % 值,而不是em
.dd
标签放在同一行dt
是有问题的。实现布局的一种更安全的方法是浮动每个标签dt
并为每个标签dd
指定。使用边距可以正确执行此操作,但浮动元素要简单得多。clear:both
dt
更新了演示。(注意:这个演示没有添加任何边距或填充。无论向水平边距或填充添加多少,和的宽度都dt
应该dd
减小。)
发现小字体问题:
什么是一致的
font-family
指定,所以使用默认的衬线字体。font-size
指定,所以使用默认值 16px。line-height:2em
是 font-size 的两倍,也就是 16px 的两倍,也就是 32px(由灰色第一行的高度表示。什么不一致
font-size
12 像素的基线高度(大写字母 H 的高度)呈现。font-size
为 16px,其基线高度为 11px。什么可以避免
默认衬线字体在不同浏览器中呈现不一致。没有办法阻止该字体这样做。但是您可以通过选择默认衬线字体以外的字体来避免一些不一致。一些字体,如 Arial,在浏览器之间呈现更加一致。
什么是无法避免的
然而,即便如此,文本呈现方式仍会存在一些不一致。在文本使用的行高空间内,文本的位置通常会因浏览器而异,至少相差 1px。这不是可以预防的。这是操作系统碰巧在那个特定的浏览器中呈现那个特定font-family
的那个特定font-size
的结果的结果。line-height
但是可以通过始终指定显式来最小化不一致line-height
,这在这种情况下已经完成。
概括
选择 a font-family
、 afont-size
和 aline-height
有助于最大程度地减少不一致。但除此之外,文本中总会有一些无法避免的不一致之处。互联网上的每个网站都有一些这样的内容。它通常不是很明显。