导航栏在Safari，Uc浏览器中隐藏，但在Firefox和Android上工作

Question

我的网站的导航栏在Firefox和Chrome上运行良好，但在导航到其他页面时Safari和UC导航栏不可见。假设您打开我的网站“rockface.000webhostapp.com”，导航栏将在当时可见，但是当您访问产品 - >定制的金刚石工具时，导航栏在UC和Safari上变得不可见。如果有人能帮我理清原因，那将是一个很大的帮助。

Answer 1

首先在开始之前你用vaildators检查css代码？记住，你必须-webkit-添加到每个这样的代码：

function myTry(x) { 
 
document.getElementById("navbar").style.background = x; 
 
}

.navbar { 
 
/* Transition for Safari & Mozilla & IE */ 
 
-webkit-transition: all .3s; 
 
-moz-transition: all .3s; 
 
/* Normal transition */ 
 
transition: all .3s; 
 
} 
 

 
.navbar:hover { 
 
background: orange; 
 
}

<div class="navbar" id="navbar"> 
 
Hover Me ! 
 
</div> 
 
<br> 
 
<button onclick="myTry('green')"> Green </button> 
 
<button onclick="myTry('red')"> Red </button> 
 
<button onclick="myTry('blue')"> Blue </button> 
 
<button onclick="myTry('white')"> White </button> 
 
<button onclick="myTry('')"> Origin (No Background) </button>

如果试图在每一个浏览器这个例子中它会工作正常，但如果删除 -webkit-和 - moz-从样式表（CSS）你将没有过渡！