为什么这个小页面在 Chrome 和 Firefox 中看起来不同，这是一个错误吗？答案

【问题标题】：Why this small page look different in Chrome and Firefox, is this a bug?为什么这个小页面在 Chrome 和 Firefox 中看起来不同，这是一个错误吗？
【发布时间】：2014-12-17 17:54:37
【问题描述】：

下面是一个小的 html 页面，在 Chrome 和 Firefox 浏览器中看起来不同。如果在本地创建一个 html 文档并通过 Chrome 打开该文档（jsfiddle 在 Chrome 中正常显示，这就是为什么我没有创建 jsfiddle 页面），谁能解释为什么它在 Chrome 中看起来不同？

<!DOCTYPE html>
<html>
<head>
<title>CCCC</title>
<style>
body * {
text-rendering:optimizeLegibility;
}

body,html {
font-family:Arial,Helvetica,sans-serif;
}

#lesu-tab ul li {
list-style:none;
font-size:14px;
font-weight:700;
float:left;
}

#lesu-tab ul li a {
border:1px solid #888;
display:block;
}

.buggy{
font-size:12px;
}
</style>
</head>
<body>
<div id="lesu-tab">
    <ul>
        <li><a href="http://www.example.com/">Link1</a></li>
        <li><a href="http://www.example.com/">Link2</a></li>
        <li><a class="buggy" href="https://www.example.com/">A ABC DEFGHIJ</a></li>
    </ul>
</div>
</body>
</html>

更让我惊讶的是，如果你将class="buggy" 的字体大小从 12px 更改为 11px 或 13px，Chrome 显示的不是两行，而是一行 - 通常。

此外，如果您删除页面上的任一 CSS 属性，它也会显示在一行中。我不清楚为什么会这样？这是一个错误吗？

任何想法如何在不删除 css 属性的情况下修复它？

当然，上面的代码只占导致此问题的巨大 html 页面的不到 1%。

谢谢。

【问题讨论】：

你用的是什么版本？我创建了一个本地文档，它在 ubuntu 上的 chrome 38、chromium 39 和 firefox 34 中看起来符合要求
Chrome 版本 39.0.2171.71 。在向 SO 提问之前，我请了两个人展示这段代码在他们的 Chrome 桌面上的外观（我不知道他们的版本）。两个人中有两个人在他们的桌面上遇到了同样的问题 - 我已经让他们分享他们的屏幕来查看。

标签： html css google-chrome firefox

【解决方案1】：

您可以通过使用不间断空格来解决此问题，如

<li><a class="buggy" href="https://www.example.com/">A&nbsp;ABC&nbsp;DEFGHIJ</a></li>

【讨论】：

虽然这可能有效，但对于整个网站/页面来说，这将是一项乏味且冗长的工作。 :-/

【解决方案2】：

使用 normalize.css 来标准化 CSS，不同的是不同的浏览器对 CSS 布局的“默认值”略有不同，

请看https://stackoverflow.com/a/8357635/3536236

您的具体问题的原因听起来像是浏览器正在根据您的缩放、字体大小和字体粗细采用不同的方法来舍入字体大小。

【讨论】：

另外，我个人发现 Chrome 喜欢在元素之间设置比 Firefox 稍大的填充和边距，所以这可能会稍微影响问题。
你不需要用这样的东西来解决一个小问题，但我认为这不能回答问题。