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

只测试HTML5的浏览器兼容性。 https://html5test.com/index.html

Answer 2

您的System.out.println(a + " AND " + b + " is " + and(a, b)); System.out.println(a + " OR " + b + " is " + or(a, b)); System.out.println(a + " XOR " + b + " is " + xor(a, b));元素在Flex容器上没有指定高度，因此％垂直填充在Firefox中解析为0。添加一个高度它应该工作。或者，您可以将<ul>类中的填充从百分比更改为px。

＆＃13;

.down

＆＃13;

nav {
    padding-top: 9%;
	
}
.wrapper {
	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%;
}

＆＃13;

另外，请看一下w3c docs

作者应该完全避免在弹性项目中使用填充或边距的百分比，因为它们会在不同的浏览器中获得不同的行为。

为什么显示两个不同的结果是chrome和mozilla浏览器

2 个答案: