元素在 Chrome 和 Firefox 中的不同位置 css 重置

Question

我在制作投资组合页面时再次遇到问题。我在检查 Firefox 时编写了我的代码 - 所以现在我的网站在这方面看起来不错，但它在 Chrome 方面有所不同 - 尽管只有很少的部分。我将添加一些图片，以便您可以看到不同之处： This is how it should look 但是 this is how it looks in Chrome 我在页脚中也有类似的问题。

我已经使用 css 重置并搜索了我的代码，但我似乎找不到错误？就像突然有更多的边距，所以 Chrome 移动了元素。

这是导航栏的 html 代码：

<!--Nav-->
    <nav>
        <div class="nav-links">
            <a href="#start"><img src="images/Bildmarke.svg" alt="home"></a>
            <p>lisa röhl</p>
        </div>
        <div class="nav-rechts">
            <ul id="nav-ul">
                <li><a class="nav" id="nav-work" href="#work">work</a></li>
                <li><a class="nav" id="nav-skills" href="#skills">skills</a></li>
                <li><a class="nav" id="nav-about" href="#about">about</a></li>
                <li><a class="nav" id="nav-contact" href="#contact">contact</a></li>            

            </ul>
        </div>
    </nav>

和 css 部分：默认值：

/*NAV*/
nav{
    height:10vh;
    position: relative;
    z-index:9000;
    background-color:#e4e0da;
    width:100%;
    clear:both;
}
.nav{
    text-decoration:none !important;
    color:#2b3534 !important;
    font-size:4vh;
}
.nav-links{
    float:left;
}
.nav-links p{
    display:none;
    position: relative;
}
.nav-links img{
    width:15vh;
    margin-top:10%;
    margin-left:2%;
}
.nav-rechts{
    right:0;
    bottom:0;
    position: absolute;
}
.nav-rechts ul, li{
    list-style-type: none;
    display:table;
    padding:auto;
}
.nav-rechts li{
    margin-left:3vw;
    float:left;
}
#nav-ul{
    margin-right: 5%;
    bottom:0;
    margin-bottom:0 !important;
}

.nav-hover{
    color:#e76600 !important;
}
.main-nav-scrolled{
    position: fixed;
    top:0;
    width:100%;

}

和平板电脑修改：

.nav{
    color:#2b3534 !important;
    font-size:3vh;
}
.sticky-nav ul{
    margin: 4.5% 1% 0 0;
}
.nav-hover{
    color:#e76600 !important;
}

和桌面：

.nav{
    font-size:3.5vh;
}
.nav-links p{
    font-size:5vh;
    color:#2b3534;
    display:inline-block;   
    position: absolute;
    bottom:0 !important;
    margin-bottom:0 !important;
}
.nav:hover{
    color:#e76600 !important;
}

如果您也需要页脚代码，请说明 - 我猜他们都犯了同样的错误。请注意，我现在还没有仔细检查过断点，所以可能还有一些东西会翻倍 ^^'

Answer 1

好的，所以我现在找到了问题： Chrome 浮动和固定边距似乎有问题。所以我只是改变了这部分：

#nav-ul{
margin-right: 5%;
bottom:0;
margin-bottom:0 !important;

}

对此：

#nav-ul{
    right: 5%;
    bottom:0;
    margin-bottom:0 !important;
}

所以基本上只是从 margin-right 更改为 just right（因为我定位绝对）。

元素在 Chrome 和 Firefox 中的不同位置 css 重置

Elements different position in Chrome and Firefox with css reset

html

css

google-chrome

firefox

positioning