Question

以下是一个小型HTML页面，在Chrome与Firefox浏览器中看起来不同。如果在本地创建一个html文档并通过Chrome打开此文档（ jsfiddle通常在Chrome中显示它，这就是为什么我还没有创建jsfiddle页面，请有人解释为什么它在Chrome中会有所不同） ）？ enter image description here

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

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

此外，如果您删除页面上任何一个css属性中的一个或另一个，它也会显示在一行中。我不清楚为什么会发生这种情况？这是一个错误吗？

如何修改它而不删除css属性的任何想法？

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

谢谢。

Answer 1

您可以使用非中断空格解决此问题，如

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

Answer 2

使用normalize.css来标准化CSS，区别在于不同的浏览器略有不同＆＃34;默认值＆＃34;对于CSS布局，

请参阅https://stackoverflow.com/a/8357635/3536236

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

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

2 个答案: