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>

如果