显示：inline-block不适用于safari [英] Display:inline-block not working on safari

问题描述

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

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

pre $ ＃header-container li {
display：inline-block ;
保证金：0 1em;
}


问题 - 菜单正在扩展到整个页面宽度（所以菜单之间的差距项目是巨大的）。

你能告诉我一些什么吗？

调试

如果将来发生这种情况，您需要调试它。

所有现代浏览器都具有内置的Web Inspector / Developer Tools（如果它们不够好 - 您可以随时抓取

未压缩：

Safari浏览器：

了解详情

详细了解适用于Chrome的开发工具， Firefox 以及< a href =https://developer.apple.com/safari/tools/ =nofollow noreferrer> Safari 。

I've stucked with my friends website on a menu issue. The URL of the website is: colorfil.webd.pl/sandbox/sylwia/

Please take a look on the menu (main navigation + top right menu + filers menu). On all modern browsers: chrome, FF, opera menu looks good. On Safari it sucks. I use this simple css (for main nav):

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

Issue - menu is being extended into total page width (so the gaps between menu items are HUGE).

Can you advice me something on that?

解决方案

Debugging

If something like this happens to you in the future you need to debug it.

All modern browsers feature in-built Web Inspectors/Developer Tools (and if they're not good enough for you - you can always grab Firebug).

If website looks different in X browsers all you need to do is to inspect the different-looking elements and then see what CSS rules are being applied to them. The differences are almost always related to different rules being applied. If you can't track existing rules in your CSS files they're most likely being added with JavaScript.

I've recorded a quick gif for your case, notice everything is fine after you remove floats and min-widths from your links (as previously stated by Imube). You don't actually need floats there, as inline-block will work just fine. I'd generally recommend avoiding floats wherever possible.

Opera vs Safari - tracking your problem using Dev Tools

Uncompressed: https://gifyu.com/images/debug47afb.gif

Why it was not working

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

Here's a demo that uses min-width of 150px for inline-block link and then overwrites it with auto. It works fine in other browsers, but in Safari the links are still 150px wide.

It's really easy to track down using dev tools:

Opera:

Safari:

DEMO

Learn more

Read more about dev tools for Chrome, Firefox and in Safari.

这篇关于显示：inline-block不适用于safari的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！