Safari中display:inline-block无效

Question

5

我和我的朋友在菜单问题上遇到了困难。网站的URL是colorfil.webd.pl/sandbox/sylwia/。

请查看菜单（主导航+右上角菜单+过滤器菜单）。在所有现代浏览器上，如Chrome、FF、Opera，菜单看起来都不错。但在Safari上看起来很糟糕。我使用了这个简单的CSS（用于主要导航）：

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

问题 - 菜单扩展到整个页面宽度（因此菜单项之间的间隙非常大）。您能为我提供一些建议吗？

- Paweł Skaba

你可以截个屏幕看看问题吗？我使用Safari没有遇到任何问题。 - Imbue

当然。这是边距问题。看一下（顶部版本来自Safari，底部版本来自Chrome）：http://imgur.com/a/AecTG - Paweł Skaba

1

移除链接（ul li a）的最小宽度和浮动。这会导致巨大的间隙。 - Imbue

我在这里进行了测试，运行良好。 - Yuri Pereira

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bart Karp · Accepted Answer

调试

如果未来出现这样的情况，你需要进行调试。

所有现代浏览器都配备了内置的Web检查器/开发工具（如果它们对你不够好，你可以随时获取Firebug）。

如果网站在不同的浏览器中看起来不同，你只需要检查不同的元素，然后查看应用于它们的CSS规则。差异几乎总是与应用不同规则有关。如果你无法跟踪CSS文件中的现有规则，它们很可能是通过JavaScript添加的。

我为你的情况录制了一个快速的gif，注意，在你从链接中删除浮动和最小宽度之后，一切都正常（如Imube之前所述）。实际上，你不需要在那里使用浮动，因为inline-block将完全正常工作。我通常建议尽可能避免使用浮动。

看起来Safari在比较其他浏览器时会忽略min-width:auto（顺便问一下，在这种情况下auto是什么意思？）。

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

使用开发工具很容易跟踪下来：

Opera：

Safari：

演示