Question

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

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

非常感谢任何帮助。感谢。

Answer 1

您需要使用-webkit作为Safari使用flexbox的前缀：

#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。

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

1 个答案: