今天在测试我的一个元素时，我发现我网站的移动导航在某些 iOS 设备上不显示它的列表项。 我在 Iphone 5 和 iPad mini 上测试过，它们都有效， 然后我在 Iphone 4 和旧 Ipad 上进行了测试，它没有显示我的导航列表项。所以我认为我将问题归结为过时的 iOS 或设备？ 我真的不知道我应该如何在无法使用桌面上的检查元素工具的情况下调试这个问题。我也没有真正发现我的代码有问题。
我的网站网址是:http://gillesvercammen.be/praniels/ 如果有人能勇敢地在旧的 iOS 设备上测试它，那就太棒了。下面我将放一些该错误的相关代码片段。 如果我的代码有点乱，请原谅我，这是我的第一个体面的元素。
这是我的完整导航(虽然问题只在于展开汉堡菜单时列表项没有显示)
<header>
<a href="#" title="praniels logo" class="logo">
<img src="<?=$prefix?>images/logo.svg" alt="logo van praniels">
</a>
<nav class="floatfix nav">
<div id="hamburgerknop">
<a href="#" title="praniels logo" class="mobile-logo">
<img src="<?=$prefix?>images/logo.svg" alt="logo van praniels">
</a>
<span id="hamburger" class="fa fa-bars"></span>
</div>
<ul class="main-nav">
<li><a class="<?php if(isset($home)){ echo($home); } ?>" href="<?=$prefix?>index.php" title="naar homepage">Home</a></li>
<li><a class="<?php if(isset($overons)){echo($overons);} ?>" href="<?=$prefix?>over-ons/over-ons.php" title="naar over ons">Over Ons</a></li>
<li><a class="<?php if(isset($producten)){echo($producten);} ?>" href="<?=$prefix?>producten/producten.php" title="naar producten">Producten</a></li>
<li><a class="<?php if(isset($workshops)){echo($workshops);} ?>" href="<?=$prefix?>workshops/workshops.php" title="naar workshops pagina">Workshops</a></li>
<li><a class="<?php if(isset($klanten)){echo($klanten);} ?>" href="<?=$prefix?>klanten/klanten.php" title="naar klantenpagina">Klanten</a></li>
<li><a class="<?php if(isset($contact)){echo($contact);} ?>" href="<?=$prefix?>contact/contact.php" title="naar contactpagina">Contact</a></li>
</ul>
<ul class="icon-nav">
<li><a href="https://www.facebook.com/" class="icon icon-mono facebook" target="_blank" title="link naar facebook"><span class="fa fa-facebook"></span></a></li>
<li><a href="https://twitter.com/?lang=nl" class="icon icon-mono twitter" target="_blank" title="link naar twitter"><span class="fa fa-twitter"></span></a></li>
<li><a href="https://plus.google.com" class="icon icon-mono googleplus" target="_blank" title="link naar google plus"><span class="fa fa-google-plus"></span></a></li>
<li><a href="https://www.instagram.com/" class="icon icon-mono instagram" target="_blank" title="link naar instagram"><span class="fa fa-instagram" target=_"blank"></span></a></li>
</ul>
<?php
if(isset($_SESSION["fldEmail"])){
?>
<a href="<?=$prefix?>logout.php" class="logout" title="link naar logout"><span class="fa fa-lock"></span>Logout</a>
<?php if(isset($_SESSION["admin"])) { ?>
<a href="<?=$prefix?>admin/admin.php" class="admingo" tile="link naar adminpagina"><span class="fa fa-lock"></span>Admin</a>
<?php } else {}}
else { ?> <a href="<?=$prefix?>klanten/klanten.php" class="logout" title="link naar logout"><span class="fa fa-unlock-alt"></span>Login</a> <?php }
?>
</nav>
</header>
以下是一些相关的 CSS 行
header {
/*background-color: rgba(255,255,255,0.5);*/
position: fixed;
left: 0;
height: 120px;
top: 0;
width: 100%;
z-index: 10;
display: block;
}
.logo {
z-index: 12;
position: absolute;
left: 50px;
top: 0;
display: block;;
width: 150px;
padding-top: 10px;
}
.nav {
z-index: 11;
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
text-align: center;
}
.non-transparent
{
z-index: 11;
background-color: rgb(31,15,16) !important;
}
.main-nav {
list-style: none;
}
.mobile-logo {
display: none;
}
.nav li {
display: inline-block;
vertical-align: middle;
height: 120px;
letter-spacing: 1px;
text-transform: uppercase;
}
.nav li a {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
font-weight: bold;
text-decoration: none;
display: block;
line-height: 16px;
height: 16px;
padding: 25px 10px 24px;
}
.nav li a:hover {
color: rgb(212,192,152);
}
.nav ul li .active {
color: rgb(212,192,152);
}
.icon-nav {
position: absolute;
right: 0px;
top: 0;
margin-right: 50px;
}
.icon {
display: inline-block;
zoom: 1;
vertical-align: top;
width: 44px;
height: 0;
padding-top: 44px;
overflow: hidden;
text-align: left;
white-space: nowrap;
}
.logout {
position: absolute;
right: 10px;
top: 10px;
text-decoration: none;
border: 1px solid rgb(246,246,226);
padding: 5px;
}
.admingo {
position: absolute;
right: 80px;
top: 10px;
text-decoration: none;
border: 1px solid rgb(246,246,226);
padding: 5px;
}
.fa-lock, .fa-unlock-alt {
margin-right: 5px;
}
.logout:hover {
border: 1px solid rgb(212,192,152);
color: rgb(212,192,152);
}
/* ================= RWD =============== */
@media screen and (min-width: 769px) {
.logo {display: block !important; }
#hamburgerknop { display: none !important; }
.nav { display: block !important; }
}
@media screen and (max-width: 768px) {
header {
height: 80px;
}
.main-nav {
display: none;
}
.expand .main-nav {
display: block;
}
#hamburgerknop {
background: rgba(31,15,16, 0.35);
padding: 8px;
text-decoration: none;
width: 100%;
z-index: 2;
height: 80px;
}
#hamburgerknop span {
margin-top: 15px;
cursor: pointer;
display: block;
padding: 3px 4px 3px;
position: relative;
color: rgb(246,246,226);
font-size: 2em;
line-height: .8;
text-align: center;
}
.nav ul {
list-style: none;
margin: 0;
width: 100%;
height: 100%;
background-color:rgb(31,15,16);
padding: 0;
}
.main-nav {
height: 0px;
}
.nav li:nth-child(1){
padding-top: 5%;
}
.nav li {
display: block;
position: relative;
font-size: 1em;
font-weight: bold;
height: 20%;
}
.nav li a {
height: initial;
display: block ;
background: none !important;
color: #fff;
text-decoration: none;
}
.nav {
clear: both;
position: fixed;
}
nav {
height: auto;
display: none;
position: fixed;
}
.expand {
display: block !important;
}
.logo {
display: none;
}
.mobile-logo {
z-index: 12;
position: absolute;
top: 0;
display: block;
margin-top: 5px;
width: 100px;
}
}
最佳答案
请使用下面提到的代码:
.non-transparent {
background-color: #1f0f10 !important;
max-height: 100%;
overflow: auto;
z-index: 11;
}
代替
.non-transparent
{
z-index: 11;
background-color: rgb(31,15,16) !important;
}
关于ios - 我的网站导航在某些 iOS 设备上出现故障，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37778629/