顯示：內聯塊不能用於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可以正常工作。 我一般建議盡可能避免使用花車。

Opera vs Safari - 使用Dev Tools跟蹤您的問題

未壓縮： https ： //gifyu.com/images/debug47afb.gif

為什么它不起作用

看起來Safari 解釋忽略了min-width: auto比較其他瀏覽器（順便說一下，在這種情況下auto應該是什么意思？）。

這是一個演示，它使用min-width為150px的inline-block鏈接，然后用auto覆蓋它。 它在其他瀏覽器中工作正常，但在Safari中鏈接仍然是150px寬。

使用開發工具跟蹤非常容易：

歌劇：

蘋果瀏覽器：

DEMO

學到更多

詳細了解適用於Chrome ， Firefox和Safari的 開發工具 。