今天在测试我的一个项目时，我发现我的网站的移动导航并没有在某些iOS设备上显示它的列表项。 我测试了Iphone 5和iPad mini，这些都有效， 然后我测试了Iphone 4和旧的Ipad，它没有显示我导航的列表项。所以我认为我把问题包含在一个过时的iOS或设备中我猜？ 我真的不知道如何调试这个问题而不能使用我在桌面上的inspect元素工具。我的代码中也没有发现问题。
我的网址网址为：http://gillesvercammen.be/praniels/ 如果有人能够勇敢地在旧的iOS设备上测试这个，那就太棒了。下面我将为bug提供一些相关代码片段。 如果我的代码有点乱，请原谅我，这是我第一个体面的项目。
这是我的完整导航（虽然问题只在于扩展汉堡菜单时未显示的列表项目）
<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;
}
}
答案 0 :(得分：0)
请使用下面提到的代码：
<p ng-bind-html="value"></p>
改为
.non-transparent {
background-color: #1f0f10 !important;
max-height: 100%;
overflow: auto;
z-index: 11;
}