显示:内联块不能用于safari

Question

我在朋友网站上遇到了菜单问题.该网站的网址是:colorfil.webd.pl/sandbox/sylwia/

请查看菜单(主导航+右上菜单+文件管理器菜单).在所有现代浏览器上:chrome,FF,opera菜单看起来不错.在Safari上很糟糕.我使用这个简单的css(用于主导航):

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

问题 - 菜单正在扩展到总页面宽度(因此菜单项之间的间隙是巨大的).

你能给我一些建议吗？

Answer 1

调试

如果将来发生类似这样的事情,你需要调试它.

所有现代浏览器都具有内置的Web Inspectors/Developer Tools(如果它们对您不够好 - 您可以随时使用Firebug).

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

我为你的情况记录了一个快速的GIF,注意你从链接中删除浮动和最小宽度后一切都很好(如前面的Imube所述).你实际上并不需要漂浮物,因为它inline-block可以正常工作.我一般建议尽可能避免使用花车.

看起来Safari 解释忽略min-width: auto了其他浏览器(auto在这种情况下应该是什么意思？).

下面是一个使用演示min-width的150px进行inline-block链接,然后用其覆盖auto.它在其他浏览器中工作正常,但在Safari中链接仍然150px很宽.

使用开发工具跟踪非常容易:

歌剧:

苹果浏览器:

DEMO