桌面或移动设备上的 Safari 中不显示菜单图标

问题描述

这是我为 735px 或更小的窗口大小创建的移动菜单.移动菜单图标(右上角)不会在桌面版 Safari 或任何移动浏览器(包括 Chrome 和 Safari)中显示.我有一种感觉，我可能会忽略一些明显的东西，但我就是想不通.

这可能与溢出:隐藏有关吗?我发现如果我在我的类 .mobilenav 中禁用它，菜单图标会显示，但显然，关闭图标也会显示.如果这是问题的根源，我该如何在保持菜单功能不变的情况下修复它?

它适用于桌面的浏览器:Chrome 75.0.3770.142、Firefox 68.0、Edge 42.17134.1.0 它不适用于桌面的浏览器:Safari 12.1.1 在移动设备上，它似乎不适用于任何浏览器.我检查了 Safari 和 Chrome.

//BEGIN MOBILE NAV函数 openMobile() {document.getElementById("myMobilenav").style.width = "100%";document.getElementById("myMobilenav").style.borderLeft = "none";}函数 closeMobile() {document.getElementById("myMobilenav").style.width = "0";document.getElementById("myMobilenav").style.borderLeft = "none";}//结束移动导航//移动下拉菜单//* 遍历所有下拉按钮以在隐藏和显示其下拉内容之间切换\*/var dropdown = document.getElementsByClassName("mobile-dropdown-btn");变量 i;for (i = 0; i < dropdown.length; i++) {dropdown[i].addEventListener("click", function() {this.classList.toggle("mobileactive");var dropdownContent = this.nextElementSibling;if (dropdownContent.style.display === "block") {dropdownContent.style.display = "无";} 别的 {dropdownContent.style.display = "block";}});}document.getElementById("myMobilenav").ontouchmove = function(e) {e.preventDefault();}

body {边距:0；}@media(最大宽度:735px){.nav {显示:无；}.navcontainer {显示:无；}header.Header.Header--top {显示:无；}}/* 结束主要导航风格 */.mobilehead {宽度:120px！重要；显示:块；左边距:10px；填充顶部:-10px；}#mobilehead {宽度:100%；高度:80px；背景颜色:#e9e5fb；边框底部:实心 1px #000；底边距:80px；}/* 开始移动导航风格 */.mobilenavcontainer {高度:100%；宽度:0px；背景颜色:#e9e5fb；位置:固定；顶部:0；右:0；z-索引:997；}#mobilemenuicon {宽度:80px；高度:自动；z-索引:5000；}.mobilenav .mobilemenuicon {顶部:20px；右:18px；位置:固定；z-index:50000；}#mobilecloseicon {宽度:80px；}.mobilenav .mobileclosebtn {顶部:20px；右:18px；左边距:10px；位置:绝对；}.mobilenav {高度:100%；宽度:0；位置:固定；z-索引:1000；顶部:0；右:0；背景颜色:#e9e5fb；溢出:隐藏；填充顶部:120px；字体系列:AmerigoBT"；}.mobilemainitems a {文字装饰:无；字体大小:3em；颜色:#000；显示:块；-webkit-text-stroke: .75px #000;-webkit-text-fill-color: #e9e5fb;行高:50px；宽度:180px；}.mobilemainitems {padding-left: 30px;填充顶部:0px；边距顶部:-96px；}.mobilesocialitems a {文字装饰:无；字体大小:1.5em；颜色:#000；显示:内联块；字体粗细:400；}.mobilesocialitems {padding-left: 30px;行高:35px；顶部:480px；位置:绝对；}.row1social {padding-left: 50px;显示:块；宽度:250px！重要；}/* 下拉按钮 */.mobile-dropdown-btn {字体系列:AmerigoBT"；文字装饰:无；字体大小:18px ！重要；颜色:#000；显示:块；过渡:0.3s；行高:54px；边界:无；背景:无；宽度:200px；文本对齐:左；大纲:无；margin-left: -11px !important;填充底部:5px；}/* 活动下拉按钮的活动类 */.mobileactive 一个 {背景颜色:无；-webkit-text-stroke: .75px #000 !important;-webkit-text-fill-color: #e9e5fb !important;}/* 下拉容器 */.mobile-dropdown-container {显示:无；背景颜色:无；padding-left: 20px;字体系列:UniversEx"；字体大小:11px；填充底部:20px；}.mobile-dropdown-container a {行高:32px；-webkit-text-fill-color: #000 !important;-webkit-text-stroke:透明！重要；}.mobile-dropdown-container a:hover {颜色:#000 ！重要；-webkit-text-stroke:透明！重要；}@media(最小宽度:736px){.mobilenav {显示:无；}.mobilenavcontainer {显示:无；}#mobilehead {显示:无！重要；}}

<header id="mobilehead"><img src="https://static1.squarespace.com/static/5c8e8d07a09a7e3c68de4c7b/t/5d07d5346b960f00012d395a/1560794420116/ck4%40300x.png" alt="Cathrine Khom" class="mobilehead"/></header><!-- 开始移动导航 --><div id="myMobilenav" class="mobilenav"><a href="javascript:void(0)" class="mobileclosebtn" onclick="closeMobile()"><img id="mobilecloseicon" src="https://static1.squarespace.com/static/5c8e8d07a09a7e3c68de4c7b/t/5d07e8d86b960f00012f1522/1560799448192/closeup%40300x.png"/></a><div class="mobilemainitems"><button class="mobile-dropdown-btn"><a href="#">Journal</a></button><div class="mobile-dropdown-container"><a href="/journal">all</a><a href="/journal?category=design">design</a><a href="/journal?category=fashion">fashion</a><a href="/journal?category=personal">personal</a><a href="/journal?category=swoon">swoon</a><a href="/journal?category=travel">travel</a>

<a href="/work">工作</a><a href="/about">关于</a><a href="#">联系方式</a>

<div class="mobilesocialitems"><div class="row1social"><a href="#" target="_blank">Twitter</a>&nbsp;&nbsp;&nbsp;<a href="#" target="_blank">Instagram</a>