Question

我正在为没有任何框架/ CMS的朋友编写完整的网站。这对我来说是一个挑战，因为我只是一个学生而且他让我做了一些我不知道的事情，但我做到了：D

我只是在网站的移动版本中遇到一个小错误，这个下拉列表是Safari的错误。

如果你想尝试查看问题，那么最小的代码是html和CSS。

There's here a link to a youtube video which show you the problem.

.navheader {
    height: 98px;
    background-color: #1a1a1a;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
}

header {
    background-color: #1a1a1a;
    z-index: 999;
}

.navbar,
.navbar>.container2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 98px;
    text-rendering: optimizeLegibility;
}
         
.navbar {
    background-color: #1a1a1a;
}
         
.nav-brand {
    font-size: 30.4px!important;
    font-size: 1.90rem!important;
}
         
.nav-right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
         
.nav-items {
    display: inline-block;
    padding: 30px;
    font-size: 18.4px;
    font-size: 1.15rem;
    text-decoration: none;
    color: #fff;
}
         
.nav-items:hover {
    color: #18BC9C;
}

.hoverautre2 {
    text-align: center;
    padding-top: 15px;
}

.hoverautre2 .lien2 {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 2em;
}

.hoverautre2 .lien2:hover {
    color: #009985;
}

.container2 {
    width: 100%;
    max-width: 1100px;
    margin: auto;
}
         
.hamburger {
    display: none;
    position: relative;
    width: 36px;
    height: 36px;
    margin-right: 20px;
    cursor: pointer;
}
         
.hamburger>span {
    display: block;
    top: 14px;
}
         
.hamburger>span,
.hamburger>span:before,
.hamburger>span:after {
    position: absolute;
    width: 100%;
    height: 4px;
    background: #fff;
}
         
.hamburger>span:before {
    content: "";
    top: -8px;
}
         
.hamburger>span:after {
    content: "";
    top: 8px;
    left: 0;
}
         
.burger {
    display: none;
}
         
input.burger[type=checkbox]:checked + label ~ .nav-right {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

@media screen and (max-width: 1200px){
    .hoverautre {
        display: none;
    }
}

@media screen and (max-width: 1024px) {
    .nav-right {
        z-index: -1;
        position: absolute;
        top: 98px;
        width: 100%;
        -webkit-box-align: center;
            -ms-flex-align: center;
                    -ms-grid-row-align: center;
                align-items: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        -webkit-transform: translateY(-100%);
                transform: translateY(-100%);
        background: #1a1a1a;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        left: 0;
        right: 0;
    }

    .hamburger {
    display: block;
    }

    .nav-brand {
        margin: auto;
        -webkit-transform: translateX(30px);
                transform: translateX(30px);
    }
}

<header class="navheader">
			<nav class="navbar">
		        <div class="container2">
		            <a href="#home" class="nav-items nav-brand">AYA DESIGN</a>
		            <input type="checkbox" id="burger" class="burger">
		            <label for="burger" class="hamburger">
		                <span></span>
		            </label>
		            <div class="nav-right">
		            	<a href="#port" class="nav-items">Portfolio</a>
		            	<a href="#about" class="nav-items">About me</a>
		                <a href="#contact" class="nav-items">Contact</a>
		            </div>
		        </div>
      </nav>
</header>

Answer 1

看起来您正在使用Safari for Windows。

Windows上Safari的最新版本是5.x.x，已经停止使用。 Apple还删除了Windows平台的所有Safari下载，使Safari成为仅限macOS的程序。

然而，macOS上Safari的当前版本是10.x.x.并且您的代码按预期工作，如此屏幕录制中所示：https://c.flm.pw/2017-04/M6gYd.mp4

Safari上的NavBar / Dropdown错误

1 个答案: