我的子菜單未在safari中顯示，但在chrome和Firefox中顯示
[英]my sub-menu is not showing in safari but it's does in chrome and firefox
問題描述
我正在為我的站點制作子菜單欄。 它適用於chrome和Firefox，但在safari上就可以使用，因為我可以單擊子菜單項，但看不到。 當有多個子菜單時，我在chrome上遇到過類似的問題。 我通過固定它來固定它，並設置了頂部和左側。
的HTML：
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="material/material.min.css">
<link rel="stylesheet" href="menu/menu.css">
<link rel="stylesheet" href="sidebar/sidebar.css">
<link rel="stylesheet" href="background/background.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="index.js"></script>
<script src="material/jquery-3.1.1.min.js"></script>
<script src="material/material.min.js"></script>
<script src="background/background.js"></script>
<script src="sidebar/sidebar.js"></script>
<script src="menu/menu.js"></script>
<script src="menu/telMenu.js"></script>
</head>
<body>
<span class="bg-wrapper">
<span class="bg"></span>
<span class="bg"></span>
<span class="bg"></span>
<span class="bg"></span>
<span class="bg"></span>
</span>
<div class="top">
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs">
<header class="mdl-layout__header">
<div role="button" tabindex="0" class="mdl-layout__drawer-button" onclick="showSidebar()">
<i class="material-icons">menu</i>
</div>
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">UnderKoen.nl</span>
</div>
</header>
<div class="sidebar">
<span class="mdl-layout-title">Menu</span>
<i class="material-icons closeButton" onclick="hideSidebar()">clear</i>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Home</a>
<a class="mdl-navigation__link external_link" href="https://school.underkoen.nl" target="_blank">
School
</a>
<a class="mdl-navigation__link external_link" href="https://github.com/UnderKoen" target="_blank">
Github
</a>
</nav>
</div>
</div>
<div class="mdl-layout__header-row"></div>
<ul class="topnav" id="myTopnav">
<li><a href="">Home</a></li>
<li><a href="#.about">About</a></li>
<li>
<a href="#.projects">Projects</a>
<div class="drp-down">
<div class="menu">
<input type="text" placeholder="Search.." class="search"><div class="sub-menu">
<a>Java</a>
<div class="menu">
<a href="#.rubik">Rubik's Cube</a>
<a href="#.monopoly">Monopoly</a>
<a href="#.discordbot">Discord Bot</a>
</div>
</div>
<div class="sub-menu">
<a>Python</a>
<div class="menu">
<a href="#.snake">Snake</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<main>
<div class="fancy"></div>
<div class="top2"></div>
<div class="mdl-grid mdl-layout__content mainindex">
<div class="mdl-card mdl-cell mdl-cell--12-col index" id="about">
<span class="title">About</span>
<span class="content">
</span>
</div>
<div class="mdl-card mdl-cell mdl-cell--12-col index" id="projects">
<span class="title">Projects</span>
<span class="content">
<div class="mdl-card mdl-cell mdl-cell--12-col subindex" id="snake">
<span class="title">Snake</span>
<span class="content">
<par>
Dit was het eerst spel wat ik echt heb gemaakt. Het is gemaakt in Python, ben begonnen met het maken van Snake in 2013. Het is gemaakt met PyGame. Heb helaas geen screenshot van het spel meer maar het was ong het standaart Snake spel.
</par>
</span>
</div>
<div class="mdl-card mdl-cell mdl-cell--12-col subindex" id="rubik">
<span class="title">Rubik's Cube</span>
<span class="content">
<par>Dit was mijn tweede spel wat ik heb gemaakt. Het was mijn eerst spel wat ik had gemaakt in Java, ik was begonnen met het maken van de Rubik's Cube in de vakantie in 2016. Het is gemaakt met behulp van JavaFx dit is een interface libarie voor Java. In het spel is een grote fout wat komt door een niet handige manier van id's opslaan. tijdens het maken van dit spel heb ik mijn vaardig heden met java enorm vergroot. Hier is de code van het programma: <a href="https://github.com/UnderKoen/Rubik-s-Cube">Github</a></par>
</span>
</div>
<div class="mdl-card mdl-cell mdl-cell--12-col subindex" id="monopoly">
<span class="title">Monopoly</span>
<span class="content">
<par>Dit was mijn eerste spel wat multiplayer zou hebben. Het spel heb ik gemaakt in Java, in het begin van het project werkte ik samen met iemand maar hij had na paar dagen geen zin er om verder te werken dus toen stond ik er alleen voor. Ik had de server kant uiteindelijk af en was bezig met de client. helaas heb ik het spel niet afgemaakt omdat ik geen insperatie had om het spel af te maken. ik denk als me klasgenoot nog hielp dat het ondertussen speelbaar was. De code van het programma staat wel nog online: <a href="https://github.com/UnderKoen/Monopoly">Github</a></par>
</span>
</div>
<div class="mdl-card mdl-cell mdl-cell--12-col subindex" id="discordbot">
<span class="title">Discord Bot</span>
<span class="content">
<par>Dit was een bot die ik had gemaakt voor iemand en nog steeds onderhou. Ik heb deze Bot 4,5 keer geschreven wegens updates en ander bullshit ik begon het te maken in C# Discord.net alleen deze werdt na een tijdje niet meer gesupport dus moest over stappen naar de nieuwe update Discord.net 1.0 hier had ik de bot wel af maar hij crashde steeds dus dacht ik dat ik hem maar opnieuw zou gaan schrijven. dit ging helaas niet heet succesvol en ik stapte halvewegen om naar een Java Libarie JDA hier had ik eerst een hele simple versie geschreven om hem online te hebben en later heb ik het vanaf de handlers af zelf gemaakt. De code van de <a href="https://github.com/UnderKoen/UnderBotCSharp">Dicord.net 1.0 bot</a> en de code van de <a href="https://github.com/UnderKoen/UnderBot">JDA bot</a></par>
</span>
</div>
</span>
</div>
</div>
</main>
</body>
</html>
javascript：
window.setTimeout(atStart, 1);
window.setTimeout(update, 100);
function update() {
$("ul li .drp-down .menu").css("max-height", ($("ul li .drp-down .menu a").first().outerHeight() + 24) * 4);
var lis = $("#myTopnav").find("li");
for (var i = 0; i < lis.length; i++) {
var obj = $(lis[i]);
if (obj.hasClass("active")) {
obj.removeClass("active");
}
var click = obj.find("a");
for (var p = 0; p < click.length; p++) {
var a = $(click[p]);
if (document.URL == a.prop("href")) {
obj.addClass("active");
if (a.attr('href').includes("#.")) {
if (hasParentsClass(a,"drp-down")) {
sort($(click[0]).attr('href').substring(2), a.attr('href').substring(2));
select($(click[0]).attr('href').substring(2));
} else {
deSort(a.attr('href').substring(2))
select(a.attr('href').substring(2));
}
}
}
}
}
var lis1 = document.getElementsByClassName("top");
var lis2 = document.getElementsByClassName("top2");
var lis3 = document.getElementsByClassName("fancy");
lis2[0].style.minHeight = (lis1[0].clientHeight + 40);
lis3[0].style.minHeight = (lis1[0].clientHeight + 60);
window.setTimeout(ehmmm, 670);
}
function ehmmm() {
$(".ink").remove();
}
function atStart(){
update();
$(window).scroll(function() {
if ($(this).scrollTop() > 10) { //use `this`, not `document`
$('.topnav').css({
'display': 'none'
});
} else {
$('.topnav').css({
'display': 'inherit'
});
}
});
var parent, ink, d, x, y;
$("ul li a").click(function(e){
$(".ink").remove();
parent = $(this).parent();
if ($(this).parents().filter("div.drp-down").length == 0) {
if(parent.find(".ink").length == 0)
parent.prepend("<span class='ink'></span>");
ink = parent.find(".ink");
ink.removeClass("animate");
if(!ink.height() && !ink.width())
{
d = Math.max(parent.outerWidth(), parent.outerHeight());
ink.css({height: d, width: d});
}
x = e.pageX - parent.offset().left - ink.width()/2;
y = e.pageY - parent.offset().top - ink.height()/2;
ink.css({top: y+'px', left: x+'px'}).addClass("animate");
}
})
$("ul li a").click(function(e){
setTimeout(update, 10);
});
$("ul li .drp-down .search").keyup(function(e){
var input = $(e.currentTarget);
var filter = input.val().toUpperCase();
var div = input.parent();
var a = div.find("a");
for (var i = 0; i < a.length; i++) {
var obj = a[i];
if (obj.innerHTML.toUpperCase().indexOf(filter) > -1) {
obj.style.display = "";
if (hasParentsClass(obj, "menu")) {
var parents = $(obj).parents(".menu");
for (var i2 = 0; i2 < parents.length; i2++) {
parents.get(i2).parentElement.firstElementChild.style.display = "";
a.remove(parents.get(i2).parentElement.firstElementChild);
}
}
} else {
obj.style.display = "none";
}
}
});
$('ul li .drp-down .menu').bind('mousewheel DOMMouseScroll', function(e) {
var prevend = false;
if ($(e.target).parent().hasClass("menu")) {
if (e.delegateTarget.parentElement.className != "sub-menu" && e.delegateTarget.parentElement.className != "drp-down" ||
e.target.parentElement != e.currentTarget) {
prevend = true;
}
}
if (!prevend) {
var scrollTo = null;
if (e.type == 'mousewheel') {
scrollTo = (e.originalEvent.wheelDelta * -1);
}
else if (e.type == 'DOMMouseScroll') {
scrollTo = 40 * e.originalEvent.detail;
}
if (scrollTo) {
e.preventDefault();
$(this).scrollTop(scrollTo + $(this).scrollTop());
}
}
});
$("ul li .drp-down .menu .sub-menu").hover(function(e) {
var obj = $(e.currentTarget);
var obj2 = $(obj.find(".menu").get(0));
var pos = $(obj.find("a").get(0));
obj2.css("top", pos.offset().top);
obj2.css("left", pos.offset().left + obj.width());
});
}
CSS：
.drop {
display: none;
position: absolute;
right: 0px;
}
ul.topnav {
list-style-type: none;
padding: 0;
overflow: hidden;
background-color: #00796B;
margin-top: 0px;
margin-bottom: 0px;
margin-right: 60px;
margin-left: 60px;
}
ul.topnav li {
position: relative;
overflow: hidden;
float: left;
display: inline-block;
}
ul.topnav li a {
padding: 14px 26px;
display: inline-block;
color: #f2f2f2;
text-align: center;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
ul.topnav li .drp-down .menu .sub-menu .menu {
display: none;
min-width: 160px;
z-index: 10;
}
ul.topnav li.icon {
display: none;
}
ul.topnav:not(.responsive) li:hover:not(.icon) {
border-bottom: 3px solid #FB8C00;
}
ul.topnav:not(.responsive) li.active:not(.icon) {
border-bottom: 3px solid #FB8C00;
}
ul.topnav li .drp-down {
display: none;
position: relative;
z-index: 10;
margin-top: 3px;
}
ul.topnav li .drp-down .menu {
overflow-y: hidden;
background-color: #EEEEEE;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
position: fixed;
z-index: 10;
}
ul.topnav li .drp-down .search {
width: 100%;
background-color: #F5F5F5;
font-size: 16px;
padding: 12px 16px;
border: none;
}
ul.topnav li .drp-down .menu input {
line-height: 24px;
}
ul.topnav li .drp-down .menu a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
min-width: 167px;
overflow-y: scroll;
}
ul.topnav li .drp-down a:hover {
background-color: #E0E0E0;
}
ul.topnav:not(.responsive) li .drp-down .menu .sub-menu:hover > .menu {
display: inherit;
}
ul.topnav:not(.responsive) li:hover .drp-down {
display: block;
position: fixed;
}
.ink {
display: block; position: absolute;
background: hsl(180, 40%, 80%);
border-radius: 100%;
transform: scale(0);
}
/*animation effect*/
.ink.animate {
animation: ripple 0.7s linear;
}
@keyframes ripple {
/*scale the element to 250% to safely cover the entire link and fade it out*/
100% {opacity: 0; transform: scale(2.5);}
}
@media screen and (max-width:680px) {
ul.topnav li:not(.active) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
ul.topnav.responsive {
position: relative;
}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
position: static
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
ul.topnav.responsive .drop {
display: inherit;
}
ul.topnav {
margin-right: 26px;
margin-left: 26px;
}
}
html {
font-family: "Helvetica", "Arial", sans-serif;
}
.top {
background-color: #009688;
top: 0px;
position: fixed;
width: 100%;
z-index: 3;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
}
.fancy {
background: -webkit-linear-gradient(90deg, rgba(0,0,0,0), rgba(48, 79, 254, 1)) !important;
background: -o-linear-gradient(90deg, rgba(0,0,0,0), rgba(48, 79, 254, 1)) !important;
background: -moz-linear-gradient(90deg, rgba(0,0,0,0), rgba(48, 79, 254, 1)) !important;
background: linear-gradient(180deg, rgba(48, 79, 254, 1), rgba(0,0,0,0)) !important;
position: fixed;
z-index: 2;
width: 100%;
}
.index {
min-height: 200px;
max-height: none;
visibility: visible;
z-index: 1;
background-color: #E0E0E0 !important;
box-shadow: 0 10px 10px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
}
.index .title {
color: black;
font-weight: bold;
font-size: 30px;
text-align: center;
padding-top: 20px;
height: 40px;
background-color: #FB8C00;
box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
}
.index .content {
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
}
.index .content img {
box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
width: 50%;
}
.index .content .centerd {
display: block;
margin: auto;
text-align: center;
}
.index .content h1 {
color: black;
font-weight: bold;
font-size: 23px;
text-align: center;
margin-top: 20px;
height: 30px;
background-color: #F4511E;
box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
}
.subindex {
min-height: 200px;
max-height: none;
visibility: visible;
z-index: 1;
background-color: #E0E0E0 !important;
box-shadow: 0 10px 10px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
}
.subindex .content {
padding-top: 20px;
padding-left: 20px;
}
.subindex .title {
color: black;
font-weight: bold;
font-size: 30px;
text-align: center;
padding-top: 20px;
height: 40px;
background-color: #C0CA33;
box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
}
#about {
}
#projects {
}
@viewport {
zoom: 1.0;
width: extend-to-zoom;
}
@-ms-viewport {
width: extend-to-zoom;
zoom: 1.0;
}
@media screen and (min-width:680px) {
}
@media screen and (max-width:680px) {
.menu {
margin-top: 0px !important;
}
.mainindex {
margin-left: 10px !important;
margin-right: 10px !important;
width: calc(100% - 36px) !important;
}
.index .content {
padding-left: 0px;
padding-right: 0px;
}
}
1 個解決方案
解決方案1
2 2017-10-14 16:50:47
調試
如果將來發生這種情況，您需要對其進行調試。
所有現代瀏覽器均具有內置的Web檢查器/開發人員工具（如果它們對您而言不夠好-您可以隨時使用Firebug）。
如果網站在X瀏覽器中看起來有所不同，那么您只需檢查外觀不同的元素，然后查看對它們應用了哪些CSS規則。 差異幾乎總是與所應用的不同規則有關。 如果您無法在CSS文件中跟蹤現有規則，則很可能是在JavaScript中添加了這些規則。
我已為您記錄了一個快速的gif，請注意， 從鏈接中刪除浮點數和最小寬度后 ， 一切都很好 （如Imube先前所述）。 實際上，您實際上不需要在此處使用浮點數，因為inline-block可以正常工作。 我通常建議盡可能避免使用浮點數。
Opera vs Safari-使用開發工具跟蹤問題
未壓縮：https://gifyu.com/images/debug47afb.gif
為什么它不起作用
與其他瀏覽器相比，似乎Safari 解釋會忽略display:inline-block （在這種情況下， inline-block應該是什么意思？）。
使用開發工具進行跟蹤非常容易：
學到更多
詳細了解Chrome，Firefox和Safari中的開發工具。
單擊任何其他父菜單的子菜單或同一子菜單時如何關閉多個子菜單
[英]How to close multiple sub-menu when clicking on any other parent menu's sub menu or same sub-menu
JS適用於Firefox和Safari，但不適用於Chrome。 這是我的網站
[英]JS works in Firefox and Safari, but not in Chrome. Here's my site
為什么我的“以前”過濾器只能在Chrome中使用，而不能在Safari或Firefox中使用？
[英]Why does my 'time ago' filter work in chrome and not safari or firefox?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.