Chrome 将空格添加到站点导航，但 Safari 不会

Question

我有一个问题，Chrome 浏览器向导航 link 添加额外的空格并导致其显示不正常。这是 Chrome 特有的，因为导航在 Safari 和 Firefox 中按预期显示。这是一个有问题的页面 https://www.mamapedia.com/n/household

这是确切问题的屏幕截图

Chrome:

Example header in Chrome browser

野生动物园：

Example header in Safari browser

许多类似页面上的此导航栏都会出现此问题，但奇怪的是并非全部。例如 https://www.mamapedia.com/n/pregnancy 在所有浏览器中都按预期显示导航。这些页面本质上是相同的，只是内容不同，但是逻辑和 css 都是一样的。

有谁知道什么会导致此浏览器特定问题？

Answer 1

每个浏览器都可以选择如何渲染事物，包括白色-space。这就是为什么不同的浏览器显示不同的东西。

尝试使用规范化文件，例如 normalize.css 以使浏览器更加一致。

在您的情况下，您的 <li> 标签有一堆白色 space，Safari 会忽略它并显示 chrome。如果您不想使用 normalize.css 或它无济于事，您还有两个选项可以解决您的特定问题。

选项 1：

您可以删除白色 space 使其变为 <li>Household</li>

选项 2：

或者您可以添加一个 css 规则来明确忽略白色space。

CSS 规则为：

li{
    white-space: nowrap;
}