Question

我网站右上角的菜单栏不适用于iOS设备。

以下是该网站的链接：http://cpsavante.com

这里是菜单栏的html和css

＆＃13;

.navHeader {
    display: block;
    position: fixed;
    top: 0px;
    z-index: 320;
    width: 100%;
    height: 50px;
    background-color: white;
    border-bottom: 1px solid #eee; 
}

.navHeader .h1 {
    display:inline-block;
    
    margin-top: 8px;
    margin-left: 7px;
    
    text-decoration: none;
    font-family: 'Lato', sans-serif;
    font-weight: 100;
    font-size: 1.7em;
    color: rgba(59, 218, 202, 0.8);
}

.h1:link {
    color: rgba(59, 218, 202, 0.8);
}

.h1:visited {
    color: rgba(59, 218, 202, 0.8);
}

.h1:active {
    color: rgba(59, 218, 202, 0.8);
}


#outerbox {
    list-style-type: none;
    list-style: none;
    
    margin-left: auto;
    margin-top: -34px;
    margin-right: 7px;
    width: 6px;
    height: 36px;  
    
    /*border: 1px solid black;*/
}

#outerbox #menu-bg {
    width: 37px;
    height: 37px;
    
    margin-left: -32px;
    margin-top: 1px;
}

    #outerbox #menu-bg:hover svg path {
    fill: rgb(59, 218, 202);
    }

    #outerbox #menu-bg:hover #innerbox {
    margin-left: -226px;
    opacity: 1;
    }

#outerbox #menu-bg svg {
    width: 36px;
    height: 36px;
    transition: all linear 0.15s;
}
    
    #menu-bg svg path {
    fill: rgba(211, 211, 211, 0.9);
    transition: all linear 0.15s;
    }


/***Innerbox: Menu Bar***/
#innerbox {
    list-style: none;
    padding: 0;
    
    margin-top: 3px;
    margin-left: 45px;
    /*margin-left: -226px;*/
    
    width: 270px;
    height: 2000%;
    
    background-color: rgba(245, 245, 245, 0.6);
    border-left: 1px solid #eee;
    
    position: absolute;
    z-index: 5;
    
    transition: all linear 0.3s;
}

#innerbox li {
    width: 98%;
    overflow: hidden;
    height: 52px;
    transition: all linear 0.15s;
    margin-bottom: 1px;
    margin-left: auto;
    margin-right: auto;
    border-bottom: 1px solid #e0e0e0; 
}

#innerbox li:hover {
    background-color: rgba(59, 218, 202, 0.8);/*Me Liky Dis Colour*/
    width: 100%;
}

#innerbox li a {
    display: block;
    text-decoration: none;
    font-family: "Lato", sans-serif;
    color: #7a7a7a;
    font-size: 1.2em;
    text-align: right;
    
    width: 98%;
    height: 48px;
    
    /*border-bottom: 1px solid white;*/
    padding-right: 5px;
    padding-top: 18px;
    padding-bottom: 0px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 2px;
    margin-bottom: 5px;
    box-sizing: border-box;
    transition: all linear 0.3s;
    border-radius: 1px;
}

#innerbox li a:hover {
    /*background-color: rgba(0, 206, 209, 0.6);*/
    color: white;
}

＆＃13;

<div class="navHeader">
  <a href="index.html" class="h1">//cpsavante</a> 

  <ul id="outerbox">
    <!--svg menu button-->
    <li id="menu-bg">
      <img>
      <svg id="menu" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 24 24">
        <path d="M3 5h18q0.414 0 0.707 0.293t0.293 0.707-0.293 0.707-0.707     
    0.293h-18q-0.414 0-0.707-0.293t-0.293-0.707 0.293-0.707 0.707-0.293zM3 
    17h18q0.414 0 0.707 0.293t0.293 0.707-0.293 0.707-0.707 0.293h-18q-
    0.414 0-0.707-0.293t-0.293-0.707 0.293-0.707 0.707-0.293zM3 11h18q0.414 
    0 0.707 0.293t0.293 0.707-0.293 0.707-0.707 0.293h-18q-0.414 0-0.707-
    0.293t-0.293-0.707 0.293-0.707 0.707-0.293z" fill="#444444"></path>
      </svg>
      </img>
      <!--svg menu button-->

      <ul id="innerbox">
        <!--<li class="tabs"><a href="#">Home</a></li>
    Welcome Home-->
        <li class="tabs"><a href="EducateYourself.html">Educate Yourself</a> 
        </li>
        <!--Learn Something New-->
        <!--<li class="tabs"><a href="#">My Enthusiasm</a></li>
    Need Something Here-->
        <li class="tabs"><a href="Services.html">Services</a>
        </li>
        <!--How Can I Serve You?-->
        <li class="tabs"><a href="Contact.html">Contact</a>
        </li>
        <!--Let's Get in Touch-->
        <li class="tabs"><a href="About.html">About / Site Bio</a>
        </li>
        <!--A little bit of Vanity-->
      </ul>

    </li>
  </ul>
</div>
<!--class="navHeader"-->

＆＃13;

这里有一个链接，指向我在外部某处发布标题的HTML / CSS，并且更容易查看：

http://codepen.io/cpsavante/pen/ZQLabG

我失踪了什么，没有理解，或做错了什么？

Answer 1

虽然在手机中调试几乎是不可能的，但就模拟器而言，这是我的意思。试试这个：

    <svg id="menu" version="1.1"   
    xmlns="http://www.w3.org/2000/svg"                                                      
    xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"  
    viewBox="0 0 24 24">
    <path d="M3 5h18q0.414 0 0.707 0.293t0.293 0.707-0.293 0.707-0.707     
    0.293h-18q-0.414 0-0.707-0.293t-0.293-0.707 0.293-0.707 0.707-0.293zM3 
    17h18q0.414 0 0.707 0.293t0.293 0.707-0.293 0.707-0.707 0.293h-18q-
    0.414 0-0.707-0.293t-0.293-0.707 0.293-0.707 0.707-0.293zM3 11h18q0.414 
    0 0.707 0.293t0.293 0.707-0.293 0.707-0.707 0.293h-18q-0.414 0-0.707-
    0.293t-0.293-0.707 0.293-0.707 0.707-0.293z" fill="#444444"></path>
    </svg>            

    <image x="-10px" y="10px" width="0px" height="0px"
         xlink:href="http://www.w3.org/2000/svg">
    </image>

这是link，涵盖Apple的SVG和iOS支持。更具体地说，etreesoft的答案导致this

菜单栏不适用于iOS设备？

1 个答案: