CSS菜单 - 移动（Safari和Chrome）问题

Question

我有一个困扰我的问题，我无法为我的生活找出造成它的原因！我有一个导航菜单，其中有3个子菜单出现在悬停上。这些菜单在移动设备上的纵向排列方式各不相同，但本质上是一样的。

我使用php include将navbar代码添加到页面，所以您会希望代码在每个页面上都能够工作。

但是，尽管代码在桌面浏览器上正常工作，但在iPhone上的某些移动浏览器（Chrome和Safari）上存在问题 - 在一个页面上3个子菜单正确显示，但在任何其他页面上，你点击它们。

为菜单中的代码如下，发生这种情况的例子在这里：

工作 - http://www.guernseydarts.com/new/index.php

不工作 - http://www.guernseydarts.com/new/results.php

* { 
 
    padding: 0; 
 
    margin: 0 auto; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    font-family: 'Ubuntu', sans-serif; 
 
    background-color: black; 
 
    min-width: 600px; 
 
} 
 

 
#container { 
 
    width: 100%; 
 
    max-width: 1280px; 
 
    min-width: 600px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
} 
 

 
#bannerpic { 
 
    height: 100px; 
 
    width: 100%; 
 
    min-width: 600px; 
 
    text-align: center; 
 
    overflow: hidden; 
 
    justify-content: center; 
 
    z-index: -100; 
 
} 
 

 
#navbar { 
 
    width: 100%; 
 
    min-width: 600px; 
 
    line-height: 2em; 
 
    background-color: darkgray; 
 
    color: black; 
 
    display: inline-flex; 
 
    font-size: 1.25em; 
 
} 
 

 
#navbar a, 
 
#nav-fix, 
 
#nav-more, 
 
#nav-tables { 
 
    width: calc(100/6); 
 
    display: inline-block; 
 
    flex: 1; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 

 
#nav-more, 
 
#nav-fix, 
 
#nav-tables { 
 
    z-index: 100; 
 
} 
 

 
#nav-more-button, 
 
#nav-more-button a, 
 
#nav-tables-button, 
 
#nav-tables-button a, 
 
#nav-fix-button, 
 
#nav-fix-button a { 
 
    width: 100%; 
 
} 
 

 
.nav-menu-category { 
 
    display: inline-block; 
 
    cursor: pointer; 
 
    background-color: gray; 
 
    color: white; 
 
    width: 100%; 
 
} 
 

 
#nav-fix-content, 
 
#nav-more-content, 
 
#nav-tables-button, 
 
#nav-tables-content, 
 
#navbar a, 
 
#nav-fix-button { 
 
    text-decoration: none; 
 
    color: black; 
 
} 
 

 
#nav-fix-button, 
 
#nav-tables-button, 
 
#nav-more-button { 
 
    cursor: pointer; 
 
} 
 

 
#nav-fix-content a:hover, 
 
#nav-more-content a:hover, 
 
#nav-tables-content a:hover, 
 
#navbar a:hover, 
 
#nav-tables:hover #nav-tables-button, 
 
#nav-fix:hover #nav-fix-button, 
 
#nav-more:hover #nav-more-button { 
 
    color: inherit; 
 
    background-color: lightgreen; 
 
} 
 

 
#nav-fix:hover #nav-fix-content, 
 
#nav-fix:active #nav-fix-content, 
 
#nav-more:hover #nav-more-content, 
 
#nav-more:active #nav-more-content, 
 
#nav-tables:hover #nav-tables-content, 
 
#nav-tables:active #nav-tables-content { 
 
    display: block; 
 
    flex-direction: column; 
 
    animation-name: animenu; 
 
    animation-duration: 400ms; 
 
    animation-timing-function: ease-in-out; 
 
    animation-fill-mode: forwards; 
 
} 
 

 
@keyframes animenu { 
 
    0% { 
 
    opacity: 0; 
 
    transform: rotateY(-90deg); 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    transform: rotateY(0deg); 
 
    } 
 
} 
 

 
#nav-fix-content, 
 
#nav-more-content, 
 
#nav-tables-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: darkgray; 
 
    flex-direction: column; 
 
    z-index: 1000; 
 
} 
 

 
#nav-fix-content, 
 
#nav-tables-content { 
 
    left: -25%; 
 
    width: 150%; 
 
} 
 

 
#nav-more-content { 
 
    width: 100%; 
 
} 
 

 
#nav-fix-content a, 
 
#nav-more-content a, 
 
#nav-tables-content a { 
 
    display: block; 
 
    width: 100%; 
 
} 
 

 
#mainbody { 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: space-around; 
 
    margin: 0 auto; 
 
    width: 100%; 
 
    max-width: 1280px; 
 
} 
 

 
#news { 
 
    padding: 10px 20px 20px 20px; 
 
    margin: 0 auto; 
 
    flex: 1; 
 
} 
 

 
#twitter-feed { 
 
    width: 400px; 
 
    padding-right: 20px; 
 
    padding-top: 10px; 
 
    margin-bottom: 50px; 
 
} 
 

 
#newsheader { 
 
    font-size: 2.5em; 
 
    color: #618925; 
 
    padding: 20px 0 10px 20px; 
 
    text-transform: uppercase; 
 
    width: 100%; 
 
} 
 

 
.article { 
 
    padding: 2%; 
 
    background-color: #292F33; 
 
    margin-bottom: 25px; 
 
    border-radius: 5px; 
 
} 
 

 
.article-header { 
 
    font-size: 1.5em; 
 
    color: #86C232; 
 
} 
 

 
.article-post-date { 
 
    font-size: 0.75em; 
 
    color: #86C232; 
 
} 
 

 
.article p { 
 
    padding-top: 15px; 
 
    color: lightgray; 
 
} 
 

 
.article p a { 
 
    color: #86C232; 
 
} 
 

 
.article p#countercss { 
 
    text-align: center; 
 
    padding-top: 0; 
 
} 
 

 
.article:last-child { 
 
    margin-bottom: 0; 
 
} 
 

 
#dtcopyright { 
 
    text-align: center; 
 
    width: 100%; 
 
    color: white; 
 
    margin-bottom: 3% 
 
} 
 

 

 
/* MEDIA */ 
 

 
@media only screen and (orientation: portrait) { 
 
    body { 
 
    font-size: 2.5em; 
 
    } 
 
    #twitter-feed { 
 
    display: none; 
 
    } 
 
    #newsheader { 
 
    text-align: center; 
 
    } 
 
    .article p#countercss img { 
 
    transform: scale(2); 
 
    vertical-align: middle; 
 
    } 
 
    /* HEADERNAV */ 
 
    #navbar, 
 
    #navbar a, 
 
    #nav-more, 
 
    #nav-fix, 
 
    #nav-tables { 
 
    display: block; 
 
    width: 100%; 
 
    } 
 
    #navbar a, 
 
    #nav-fix-button, 
 
    #nav-more-button, 
 
    #nav-tables-button { 
 
    border-bottom: 1px solid black; 
 
    } 
 
    #nav-fix-content, 
 
    #nav-tables-content { 
 
    left: 0; 
 
    width: 100%; 
 
    background-color: #666666; 
 
    } 
 
    #nav-fix-content, 
 
    #nav-more-content, 
 
    #nav-tables-content { 
 
    position: relative; 
 
    } 
 
    #nav-fix:hover #nav-fix-content, 
 
    #nav-more:hover #nav-more-content, 
 
    #nav-tables:hover #nav-tables-content, 
 
    #nav-fix:active #nav-fix-content, 
 
    #nav-more:active #nav-more-content, 
 
    #nav-tables:active #nav-tables-content { 
 
    display: block; 
 
    flex-direction: column; 
 
    animation: none; 
 
    } 
 
    /* END OF HEADERNAV */ 
 
}

<div id="bannerpic"><img src="http://www.guernseydarts.com/banner1.jpg" alt="bannerpic"></div> 
 
<!-- End of "bannerpic" --> 
 
<div id="navbar"> 
 
    <a href="http://www.guernseydarts.com/new/index.php">Home</a> 
 
    <div id="nav-fix"> 
 
    <div id="nav-fix-button">Fixtures</div> 
 
    <!-- End of "nav-fix-button" --> 
 
    <div id="nav-fix-content"> 
 
     <div class="nav-menu-category">Herald</div> 
 
     <a href="http://www.guernseydarts.com/fix/heralddiv1.htm">Division 1</a> 
 
     <a href="http://www.guernseydarts.com/fix/heralddiv2.htm">Division 2</a> 
 
     <div class="nav-menu-category">GDL Individual</div> 
 
     <a href="http://www.guernseydarts.com/fix/gdlfix1.htm">Division 1</a> 
 
     <a href="http://www.guernseydarts.com/fix/gdlfix2.htm">Division 2</a> 
 
     <a href="http://www.guernseydarts.com/fix/gdlfix3.htm">Division 3</a> 
 
     <div class="nav-menu-category">Maple Leaf</div> 
 
     <a href="http://www.guernseydarts.com/fix/maplefix.htm">Division 1</a> 
 
     <div class="nav-menu-category">Triples</div> 
 
     <a href="http://www.guernseydarts.com/fix/triplesdiv1.htm">Division 1</a> 
 
     <a href="http://www.guernseydarts.com/fix/triplesdiv2.htm">Division 2</a> 
 
     <div class="nav-menu-category">Western Individual</div> 
 
     <a href="http://www.guernseydarts.com/fix/westindfixdiv1.htm">Division 1</a> 
 
     <a href="http://www.guernseydarts.com/fix/westindfixdiv2.htm">Division 2</a> 
 
     <a href="http://www.guernseydarts.com/fix/westindfixdiv3.htm">Division 3</a> 
 
    </div> 
 
    <!-- End of "nav-fix-content" --> 
 
    </div> 
 
    <!-- End of "nav-fix" --> 
 
    <div id="nav-tables"> 
 
    <div id="nav-tables-button">Tables</div> 
 
    <!-- End of "nav-tables-button" --> 
 
    <div id="nav-tables-content"> 
 
     <div class="nav-menu-category">Herald</div> 
 
     <a href="http://www.guernseydarts.com/tables/heraldtables.htm">Division 1</a> 
 
     <a href="http://www.guernseydarts.com/tables/heraldtables.htm#herald2">Division 2</a> 
 
     <div class="nav-menu-category">GDL Individual</div> 
 
     <a href="http://www.guernseydarts.com/tables/gdltables.htm">Division 1</a> 
 
     <a href="http://www.guernseydarts.com/tables/gdltables.htm#indiv2">Division 2</a> 
 
     <a href="http://www.guernseydarts.com/tables/gdltables.htm#indiv3">Division 3</a> 
 
     <!--<div class="nav-menu-category">Maple Leaf</div> 
 
    \t \t \t \t \t <a href="fix/maplefix.htm">Division 1</a>--> 
 
     <div class="nav-menu-category">Triples</div> 
 
     <a href="http://www.guernseydarts.com/tables/triplestables.htm">Division 1</a> 
 
     <a href="http://www.guernseydarts.com/tables/triplestables.htm#triples2">Division 2</a> 
 
     <div class="nav-menu-category">Western Individual</div> 
 
     <a href="http://www.guernseydarts.com/tables/westindtables.htm">Division 1</a> 
 
     <a href="http://www.guernseydarts.com/tables/westindtables.htm#div2">Division 2</a> 
 
     <a href="http://www.guernseydarts.com/tables/westindtables.htm#div3">Division 3</a> 
 
    </div> 
 
    <!-- End of "nav-tables-content" --> 
 
    </div> 
 
    <!-- End of "nav-tables" --> 
 
    <a href="http://www.guernseydarts.com/new/results.php">Results</a> 
 
    <a href="http://www.guernseydarts.com/mapleleaf.html">Maple Leaf</a> 
 
    <div id="nav-more"> 
 
    <div id="nav-more-button">More</div> 
 
    <!-- End of "nav-more-button" --> 
 
    <div id="nav-more-content"> 
 
     <a href="http://forum.guernseydarts.com">Forum</a> 
 
     <a href="http://www.guernseydarts.com/photos.htm">Photos</a> 
 
     <a href="http://www.guernseydarts.com/archive.htm">Archive</a> 
 
     <a href="http://www.guernseydarts.com/links.htm">Links</a> 
 
     <a href="http://forum.guernseydarts.com/calendar.htm">Calendar</a> 
 
    </div> 
 
    <!-- End of "nav-more-content" --> 
 
    </div> 
 
    <!-- End of "nav-more" --> 
 
</div> 
 
<!-- End of "navbar" -->

任何帮助不胜感激。

感谢

Answer 1

两个Chrome和Safari的WebKit浏览器，我的猜测是，这与没有前缀你的CSS做。

完全前缀@keyframes代码应该是这样的：

@-webkit-keyframes animenu { 
    0% {opacity: 0; -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg);} 
    100% {opacity: 1; -webkit-transform: rotateY(0deg); transform: rotateY(0deg);} 
} 
@keyframes animenu { 
    0% {opacity: 0; -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg);} 
    100% {opacity: 1; -webkit-transform: rotateY(0deg); transform: rotateY(0deg);} 
} 

事实上，你应该通过Autoprefixer运行整个CSS，设置“筛选”框中> 0%。

您还有5 errors但他们都没有解释您描述的问题。但是，关于不设置字符编码的问题非常严重。

最后，但并非最不重要的，不依赖于

animation-fill-mode: forwards; 

...让您的最终动画状态上悬停/有效的项目。将动画的最终状态添加到规则集：

opacity: 1; 
-webkit-transform: rotateY(0deg); 
     transform: rotateY(0deg); 

它不会伤害它，也不会影响动画。但对@keyframe s有问题的浏览器将默认应用没有动画的样式，而不会执行任何操作。