段落文本上的 Chrome 填充问题

Question

我对 Web 开发领域有点陌生，我在 Chrome 上遇到了一个非常持久的问题，我似乎不太明白。

我正在使用Compact News Previewer 向数据库显示新条目。您会注意到，如果您在 Firefox 中查看演示，一切都非常合适，但在 Chrome 中，左侧栏中的段落会被截断。我在自己的实现中遇到了同样的问题，如下所示（注意：我的实现与演示有点不同）：

如果您转到this website，您可以自己查看此问题。

我尝试过的：

1. CSS Reset - 不会产生不同的结果。

编辑

我正在使用 Chrome V18.0.1025.151，打算在 Ubuntu 上尝试系统更新，所以我明天检查一下，看看这是否能解决问题。

编辑 2 显然我使用的是最新版本的谷歌浏览器，这个版本可能有问题。但如果没有其他人可以看到这个问题，那么也许这不是一个问题......

编辑 3 发现我使用的是 Chromium 而不是 Chrome，我没有意识到有区别。我安装了 Chrome 7，但遇到了与 Chromium 相同的问题。也突然这些浏览器都不能显示我的一些 jpg 图像？ C̶h̶r̶o̶m̶e̶̶m̶u̶s̶t̶̶b̶e̶̶i̶n̶c̶r̶e̶d̶i̶b̶l̶y̶̶b̶u̶g̶g̶y̶̶o̶n̶̶U̶b̶u̶n̶t̶u̶!̶

Answer 1

问题似乎是由于 Chrome 的默认 line-height 和您在页面上使用的字体造成的。 Myriad Pro 和 Trebuchet MS 在与 Chrome 的默认值一起使用时似乎具有非常广泛的领先优势；无衬线字体很好。由于.cn_list p 具有固定高度和overflow:hidden 设置，巨大的line-height Chrome 提供这些字体将文本推出框外，将其切断。

你有几个选择：

• 在您的.cn_list p 规则或父元素的规则中指定line-height 值，如body 以将其向下级联。 （1 或 1em 之类的东西会收紧，但是 YMMV。）
• 移除固定高度和隐藏溢出，这可能会破坏您的设计，因为它会破坏网格。

不过，添加 line-height 应该可以解决问题。

正是出于这个原因，HTML5Boilerplate always set a default line-height 之类的项目。