下面是一个小的 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%。
谢谢。
最佳答案
您可以使用不间断空格来解决这个问题，如
<li><a class="buggy" href="https://www.example.com/">A ABC DEFGHIJ</a></li>
关于html - 为什么这个小页面在 Chrome 和 Firefox 中看起来不同，这是一个错误吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27317297/