Safari浏览器（移动和桌面）表浮动错误

Question

我的影片格式为菜单表，并在窗口（使用媒体查询）变得太小，应该使自己适应。而不是在一条线上，菜单项应该将自己定位对方的下面，所以这样的：

它在Chrome桌面工作正常，但是当我尝试在Safari中出现这种情况：

这真的很奇怪。我清除了缓存，所以这不是问题。移动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>

如果