為什么這個小頁面在Chrome和Firefox中看起來不同，這是一個錯誤嗎？

Question

下面是一個小的html頁面，在Chrome和Firefox瀏覽器中看起來不同。 任何人都可以解釋為什么它在Chrome中看起來不同如果在本地創建一個HTML文檔並通過Chrome打開此文檔（ jsfiddle通常在Chrome中顯示它，這就是為什么我也沒有創建jsfiddle頁面 ）？在此輸入圖像描述

<!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或13px for class="buggy" ，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，區別在於不同的瀏覽器對CSS布局的“默認值”略有不同，

請參閱https://stackoverflow.com/a/8357635/3536236

您的特定問題的原因聽起來像瀏覽器采取不同的方法來根據您的縮放，字體大小和字體粗細舍入字體大小。

為什么這個小頁面在Chrome和Firefox中看起來不同，這是一個錯誤嗎？

問題描述

2 個解決方案

解決方案1
1 已采納 2014-12-05 13:54:11

解決方案2
1 2014-12-05 13:54:21

為什么這個小頁面在Chrome和Firefox中看起來不同，這是一個錯誤嗎？

問題描述

2 個解決方案

解決方案1 1 已采納 2014-12-05 13:54:11

解決方案2 1 2014-12-05 13:54:21

解決方案1
1 已采納 2014-12-05 13:54:11

解決方案2
1 2014-12-05 13:54:21