使用 ul 和 li 的菜单在 safari 中无法正确显示答案

【问题标题】：Menu using ul and li doesn't display correctly in safari使用 ul 和 li 的菜单在 safari 中无法正确显示
【发布时间】：2015-09-23 03:10:20
【问题描述】：

我对 CSS 还很陌生，但我在 http://www.peterboroughweddingdjs.com 网站上创建了一个菜单，它悬停在背景视频上。这是一个使用 ul 和 li 的简单菜单，它在我尝试过的每个浏览器中都能正确显示，除了 safari。在 Safari 中，它像列表一样堆叠菜单项，而不是像在 chrome 中那样排列成一行。这是我的菜单 CSS。为什么 Safari 如此痛苦？

#menu-main-navigation {
    list-style-type: none !important;
    margin: 0;
    padding: 0;
    display: flex !important;
    float: left:
}

任何帮助将不胜感激。谢谢。

【问题讨论】：

标签： wordpress css safari

【解决方案1】：

Safari 使用 flexbox 需要前缀-webkit：

#menu-main-navigation {
    list-style-type: none !important;
    margin: 0;
    padding: 0;

    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    float: left;
}

阅读更多Can I Use。

【讨论】：