显示：内联块在 safari 上不起作用

我一直在我朋友的网站上解决菜单问题。该网站的网址是： colorfil.webd.pl/sandbox/sylwia/

请查看菜单（主导航+右上角菜单+文件管理器菜单）。在所有现代浏览器上：chrome、FF、opera 菜单看起来不错。在 Safari 上，这很糟糕。我使用这个简单的CSS（用于主导航）：

    #header-container li {
    display:inline-block;
    margin:0 1em;
}

问题 - 菜单被扩展到总页面宽度（因此菜单项之间的间隙很大）。

你能给我一些建议吗？

调试

如果以后类似的事情发生在你身上，你就需要调试它。

所有现代浏览器都具有内置的 Web 检查器/开发人员工具（如果它们对您来说不够好 - 您可以随时获取Firebug).

如果网站在 X 浏览器中看起来不同，您所需要做的就是检查外观不同的元素，然后查看对它们应用了哪些 CSS 规则。这些差异几乎总是与所应用的不同规则有关。如果您无法跟踪 CSS 文件中的现有规则，它们很可能是通过 JavaScript 添加的。

我已经为你的案例录制了一个快速 gif，请注意从链接中删除浮动和最小宽度后，一切都很好（如 Imube 之前所述）。你实际上并不需要那里的浮动，因为inline-block会工作得很好。我通常建议尽可能避免浮动。

Opera 与 Safari - 使用开发工具跟踪您的问题

未压缩：https://gifyu.com/images/debug47afb.gif

为什么它不起作用

Looks like Safari interprets ignores min-width: auto in comparison other browsers (by the way what is auto supposed to mean in this case?).

这是一个使用的演示min-width of 150px for inline-block链接，然后用以下内容覆盖它auto。在其他浏览器中工作正常，但在 Safari 中链接仍然存在150px wide.

使用开发工具很容易追踪：

Opera:

Safari:

DEMO

了解更多

阅读更多关于Chrome 的开发工具, Firefox and in Safari.