Flex 框布局和 Safari Mobile

Question

下午好，

我正在尝试在该网站上为移动设备重新排列页脚：https://staging.theenergyyear.com/

在所有其他浏览器上，它目前看起来像这样：

但是，在 Safari 移动设备上，目前看起来像这样：

我希望它看起来像在其他浏览器上一样，但是，我什至不确定这里发生了什么，而且我无法访问 iDevices 来查找自己。

页脚移动 CSS 相当基本：

@media screen and (max-width: 767px) {
#footer {
        margin: 0 5% 50px;
        /*re-build the menu box as a flex box instead of block*/
        .menu-footer {
            display: flex;
            float: unset;
            width: 100%;
            /*rebuild the list as a flex box instead of block*/
            ul {
                display: flex;
                justify-content: space-evenly;
                flex-wrap: wrap;
                column-gap: 15px;
                row-gap: 15px;
                width: 95%;
                margin-top: 25px;
                li {
                    margin-right: 0; /*undoing the margin*/
                }
            }
        }
    }
}

我检查了 canIuse.com，看看我使用的任何属性在 Safari 上是否有问题，并且所有内容似乎都已支持一段时间了，因此供应商前缀不起作用。有更多 Safari 经验的人可以帮助我吗？

谢谢！

Answer 1

好吧，我最终想通了......

问题是 Safari 的特定版本不支持嵌套 CSS，所以我不得不将其展开。