Question

我再次在制作我的protfolio页面时遇到问题。我在检查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;
}

如果您还需要页脚代码，请说出来 - 我猜他们都有同样的错误。请注意，我现在还没有对breackpoints进行双重检查，因此可能还有一些事情会加倍^^'

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变为恰到好处（因为我定位绝对）。

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

1 个答案: