为什么显示两个不同的结果是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