Safari（移动和桌面）表格浮动错误

Question

我有一个格式化为菜单的表格，当窗口变得太小时（使用媒体查询）时，它应该会自行调整。菜单项不应排成一行，而应将它们置于彼此下方，如下所示：

它在 Chrome 桌面上运行良好，但是当我在 safari 中尝试时会发生这种情况：

真的很奇怪。我已经清除了缓存，所以这不是问题。移动 safari 和移动 chrome 也会出现同样的问题。我在这里真的很傻，希望有人知道解决方案。 这是一个演示菜单的 JSfiddle：https://jsfiddle.net/0wwnqkd9/ 编辑：想补充一下，它确实可以在 Safari 中的 JSFiddle 中使用。

您也可以访问this website 进行演示

以及（孤立的）代码：

HTML

<div id="MENU_WR">
    <table id="MENU">
        <td><a href="#ABOUT">about</a></td>
        <td><a href="#products">products</a></td>
        <td><a href="#portfolio">portfolio</a></td>
        <td><a href="#portfolio">portfolio</a><
    </table>
</div>

CSS

body {
    background-color: #171319;
}

#MENU_WR {
    position: absolute;
    top: 100px;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 600px;
    width: 60%;
    height: 55px;
    border: 2px solid rgba(128, 176, 105, 0.3);
    border-radius: 10px;
    animation: menuDown 1.5s ease-in;
}

#MENU {
    font-family: Comfortaa, Arial;
    border-collapse: collapse;
    font-weight: normal;
    width: 100%;
    height: 100%;
    font-size: 20px;
    color: #7fb069;
    text-align: center;
}

#MENU td {
    width: 25%;
    height: 100%;
}

#MENU td>a {
    padding-top: 15px;
    display: block;
    text-decoration: none;
    color: inherit;
    width: 100%;
    height: 100%;
}

#MENU td:hover {
    background: rgba(128, 176, 105, 0.3);
}

#MENU td:first-child {
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
}

#MENU td:last-child {
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
}

@media screen and (max-width: 980px) {
    #MENU_WR {
        display: inline-block;
        width: 100%;
        max-width: none;
        border: none;
        height: 220px;
        border-radius: 0;
    }
    #MENU td {
        display: inline-block;
        width: 100%;
        height: 25%;
        float: left;
        border-radius: 0;
    }
    #MENU {
        float: left;
    }
    #MENU td:first-child {
        border-bottom-left-radius: 0px;
        border-top-left-radius: 0px;
    }
    #MENU td:last-child {
        border-bottom-right-radius: 0px;
        border-top-right-radius: 0px;
    }
}

Answer 1

首先，您网站上的标记和小提琴是不同的。在您的示例代码中，您省略了出现在您网站上的 tbody 和 tr 标记。

更好的方法是使用ul 作为导航，并使用 flexbox 更改方向。工作示例：https://jsfiddle.net/563nrLrp/1/

body {
    background-color: #171319;
}


#MAIN_WR {
    width: 100%;
    height: 100%;
}

#LOGO_SPLASH {
    position: absolute;
    top: -165px;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 800px;
    width: 80%;
    height: auto;
    animation: logoUp 1.5s ease-out;
}

#MENU_WR {
    position: absolute;
    top: 100px;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 600px;
    width: 60%;
    height: 55px;
    border: 2px solid rgba(128, 176, 105, 0.3);
    border-radius: 10px;
    animation: menuDown 1.5s ease-in;
}

#MENU {
    font-family: Comfortaa, Arial;
    border-collapse: collapse;
    font-weight: normal;
    width: 100%;
    height: 100%;
    font-size: 20px;
    color: #7fb069;
    text-align: center;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

#MENU li {
    width: 25%;
    height: 100%;
}

#MENU li>a {
    padding-top: 15px;
    display: block;
    text-decoration: none;
    color: inherit;
    width: 100%;
    height: 100%;
}

#MENU li:hover {
    background: rgba(128, 176, 105, 0.3);
}

#MENU li:first-child {
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
}

#MENU li:last-child {
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
}

@media screen and (max-width: 980px) {
    #MENU_WR {
        display: inline-block;
        width: 100%;
        max-width: none;
        border: none;
        height: 220px;
        border-radius: 0;
    }
    #MENU li {
        display: block;
        width: 100%;
        height: 25%;
        border-radius: 0;
    }
    
    #MENU {
      display: block;
    }

    
    #MENU li:first-child {
        border-bottom-left-radius: 0px;
        border-top-left-radius: 0px;
    }
    #MENU li:last-child {
        border-bottom-right-radius: 0px;
        border-top-right-radius: 0px;
    }
}

<nav id="MENU_WR">
    <ul id="MENU">
        <li><a href="#ABOUT">about</a></li>
        <li><a href="#products">products</a></li>
        <li><a href="#portfolio">portfolio</a></li>
        <li><a href="#contact">contact</a></li>
    </ul>
</nav>