显示：inline-block的不工作的Safari浏览器

Question

我stucked与我的朋友在菜单问题的网站。该网站的网址是：colorfil.webd.pl/sandbox/sylwia/

请把菜单一看（主导航+右上方的菜单+文件管理器菜单）。在所有现代浏览器：铬，FF，歌剧菜单看起来不错。在Safari它吮吸。我用这个简单的CSS（主NAV）：

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

问题 - 菜单正在扩展到总页面宽度（这样的菜单项之间的间隙是巨大的）。

你能不能指点我上的东西？

Answer 1

调试

如果这样的事情发生在你身上，将来你需要调试。

所有现代浏览器功能内置的Web督察/开发者工具（如果他们不是配不上你 - 你总能抢Firebug）。

如果网站看起来在X的浏览器不同，所有你需要做的是检查不同外观的元素，然后看看有什么CSS规则正被应用到它们。差异几乎总是与被应用于不同的规则。如果你不能在你的CSS文件跟踪现有规则他们是最有可能被添加的JavaScript。

我录的快速GIF对于你的情况，请注意您从链接中删除花车和最小宽度后（如以前Imube说明），一切都很好。你实际上并不需要花车那里，inline-block会工作得很好。我一般会建议避免浮筒尽可能。

歌剧VS野生动物园 - 跟踪使用开发工具您的问题

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

为什么它不工作

看起来像Safari浏览器 解释 忽略min-width: auto相比其他浏览器（通过什么auto认为在这种情况下指的方式吗？）。

下面是一个使用min-width为150px链接inline-block演示，然后用auto覆盖它。它可以在其他浏览器中正常，但在Safari浏览器中的链接仍然150px宽。

这真的很容易追查使用开发工具：

歌剧：

苹果浏览器：

DEMO

学到更多

了解更多关于dev tools for Chrome，Firefox和Safari。