Question

我有一个格式化为菜单的表格，当窗口太小时（使用媒体查询）它应该自我调整。菜单项应该位于彼此之下，而不是一行，所以这样：

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

真的很奇怪。我已经清除缓存，这不是问题所在。移动游侠和移动Chrome也会出现同样的问题。我真的很傻，我希望有人知道解决方案。这是一个JSfiddle演示菜单：https://jsfiddle.net/0wwnqkd9/ 编辑：想要添加，它确实在JSFiddle，Safari中工作。

您还可以访问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>

Safari（移动和桌面）表浮动bug

1 个答案: