html - Safari 上的 NavBar/Dropdown 错误

Question

我正在为没有任何框架/CMS 的 friend 编写一个完整的网站。这对我来说就像是一个挑战，因为我只是一个学生，他让我做一些我不知道的事情，但我做到了 :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

看起来您使用的是 Windows 版 Safari。

Windows 上最后一个版本的 Safari 是 5.x.x，此后已停产。 Apple 还删除了所有适用于 Windows 平台的 Safari 下载，使 Safari 成为 macOS 专用程序。

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