Question

我在Chrome浏览器中遇到了问题，即Chrome浏览器向导航链接添加了多余的空格并导致其显示异常。这是特定于Chrome的，因为导航在Safari和Firefox中可以正常显示。这是一个页面https://www.mamapedia.com/n/household

以下是确切问题的屏幕截图

Chrome浏览器：

Safari：

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

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

Answer 1

每个浏览器都可以选择如何渲染事物，包括空白。这就是为什么不同的浏览器显示不同内容的原因。

尝试使用标准化文件（例如normalize.css）使浏览器更加一致。

在您的情况下，您的<li>标签包含一堆空白，而safari会忽略这些空白，并显示镶边。如果您不想使用normalize.css或对您没有帮助，则可以针对您的特定问题提供两个选择。

选项1：

您可以删除空格，使其成为<li>Household</li>

选项2：

或者您可以添加css规则以明确忽略空白。

CSS规则为：

li{
    white-space: nowrap;
}