段落文本上的 Chrome 填充问题

Posted 2023-03-06

【中文标题】段落文本上的 Chrome 填充问题

【英文标题】：Chrome Padding Issue On Paragraph Text

【发布时间】：2012-06-27 04:40:35

【问题描述】：

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

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

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

我尝试过的：

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̶!̶

【问题讨论】：

对我来说看起来不错。 Chrome/Win7

您的图片没有清楚地说明这一点。你能细化吗？用某种红色突出显示出了什么问题。

更新了图片。我在 Ubuntu 上使用 Chrome，但是当我看到一位同事在 Windows 7 上打开我的网站时，我看到了同样的问题。

在 Chrome 19.0.1084.56 中运行良好

你能在 Chrome 开发者工具中检查那个有问题的元素上计算的 line-height 属性的值吗？

【参考方案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 之类的项目。

【讨论】：

Chrome 似乎对我的任何 CSS 更改都没有响应。我尝试了隐身模式+清除内容缓存，但仍然没有任何反应。即使我将每个 p 元素都设置为 display:none，它仍然保留旧的 stylehseet。另外，我想操纵行高会使 FireFox 版本看起来很奇怪，是否存在只影响 Chrome 的行高？

噢！我正在查看我网站的生产版本而不是开发版本。是的，操纵行高在 Chrome 中修复了它。但是有没有办法将此行高更改仅应用于 chrome，这样它就不会影响 Firefox 版本？

没关系，设置默认行高可以使 Firefox 和 Google Chrome 的样式同步。感谢您的帮助！