爲什麼顯示兩個不同的結果是Chrome和Mozilla瀏覽器

Question

我正在練習HTML CSS並做了一個導航，但結果在Chrome和Mozilla瀏覽器中不同。我想要頂部的服務和投資組合以及底部的其他菜單。我已經放棄了類填充頂部和它的工作正常在鉻，但在Mozilla中，所有的菜單都是直線排列的。提前致謝。

<nav class="wrapper"> 
        <ul> 
         <li class="down"><a href="#FIXME" title="About"><img src="assets/images/about.png" alt="About"></a></li> 
         <li class="down"><a href="#FIXME" title="Team"><img src="assets/images/team.png" alt="Team"></a></li> 
         <li><a href="#FIXME" title="Services"><img src="assets/images/service.png" alt="Services"></a></li> 
         <li><a href="#FIXME" title="Portfolio"><img src="assets/images/port.png" alt="Portfolio"></a></li> 
         <li class="down"><a href="#FIXME" title="Blog"><img src="assets/images/blog.png" alt="Blog"></a></li> 
         <li class="down"><a href="#FIXME" title="Contact"><img src="assets/images/contact.png" alt="contact"></a></li> 
        </ul> 
</nav> 

CSS代碼

nav { 
padding-top: 9%; 
} 
.wrapper { 
    background-color: yellow; 
    text-align: center; 
} 

nav ul { 
    display: flex; 
    justify-content: space-between; 
} 

ul { 
    list-style-type: none; 
} 

.down { 
    padding-top: 60%; 
} 

nav li { 
    width: 15%; 
} 

鏈接codepen：Codepen

Answer 1

您的<ul>元素在flex容器上沒有指定高度，所以％vertical填充在Firefox中解析爲0。增加一個高度，它應該工作。或者，您可以將.down類中的填充從百分比更改爲px。

nav { 
 
    padding-top: 9%; 
 
\t 
 
} 
 
.wrapper { 
 
\t background-color: yellow; 
 
    text-align: center; 
 
} 
 

 
nav ul { 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    height: 500px; 
 
} 
 

 
.down { 
 
    padding-top: 10%; 
 
} 
 

 
nav li { 
 
    width: 15%; 
 
}

<nav class="wrapper"> 
 
    <ul> 
 
     <li class="down"> 
 
      <a href="#FIXME" title="About"><img src="assets/images/about.png" alt="About"></a> 
 
     </li> 
 
     <li class="down"> 
 
      <a href="#FIXME" title="Team"><img src="assets/images/team.png" alt="Team"></a> 
 
     </li> 
 
     <li> 
 
      <a href="#FIXME" title="Services"><img src="assets/images/service.png" alt="Services"></a> 
 
     </li> 
 
     <li> 
 
      <a href="#FIXME" title="Portfolio"><img src="assets/images/port.png" alt="Portfolio"></a> 
 
     </li> 
 
     <li class="down"> 
 
      <a href="#FIXME" title="Blog"><img src="assets/images/blog.png" alt="Blog"></a> 
 
     </li> 
 
     <li class="down"> 
 
      <a href="#FIXME" title="Contact"><img src="assets/images/contact.png" alt="contact"></a> 
 
     </li> 
 
    </ul> 
 
</nav>

而且，看看這裏w3c docs

作者應該避免使用補白百分比或利潤率在彎曲的物品完全，因爲他們會得到不同的瀏覽器不同的行爲。

Answer 2

只是測試HTML5瀏覽器的兼容性。 https://html5test.com/index.html