Z-Index不适用于Safari - 适用于Firefox和Chrome
Z-index在Safari上无法正确呈现 - 但它在Chrome和Firefox上正常工作。我无法弄清楚Safari的具体缺陷是什么。Z-Index不适用于Safari - 适用于Firefox和Chrome
下面是相关代码:
.flex-container{
display: inline-flex;
align-items: center;
justify-content: center;
}
.flex-item{
margin-left: 14%;}
#inner-ul2{
margin-left: 70px;}
#inner-navbar{
z-index: 1;
background-color: white;
overflow: hidden;
margin-top: 50px;
box-shadow: 0px 10px 10px #444444;}
.inner-buttons{
background-color: white;
overflow: hidden;
color: black;
font-family: Roboto;
font-weight: 300;
font-size: large;}
.inner-buttons-left{
overflow: hidden;
margin-right: 45px;}
.inner-buttons-right{
overflow: hidden;
margin-left: 40px;}
#inner-logo{
position:fixed;
z-index: 2;
display: inline-block;
float: none;
height: 100px;
width: 120px;
margin-top: -20px;
margin-left: -25px;
margin-right: auto;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
box-shadow: 0px 20px 10px -10px #444444;
}
.navbar .navbar-nav{
display: inline-block;
float: none;
vertical-align: middle;}
#slider{
z-index: -1;
padding: 0;
overflow: hidden;
border-style: none;
margin-top: 30px;
margin-bottom: 0px;}
<div class="row-fluid">
<div class="navbar subnav navbar-fixed-top" id="inner-navbar">
<div class="navbar-inner">
<div class="flex-container">
<span class="flex-item"><ul class="nav navbar-nav" id="inner-ul">
<li><a class="inner-buttons inner-buttons-left" href="/home/">HOME</a></li>
<li><a class="inner-buttons inner-buttons-left" href="#">SHOP</a></li>
<li><a class="inner-buttons inner-buttons-left" href="#">OPPORTUNITY</a></li>
</ul>
<ul class="nav navbar-nav">
<li href="#"><img id="inner-logo" src="http://placehold.it/120x100"></li></ul>
<ul class=" nav navbar-nav" id="inner-ul2">
<li><a class="inner-buttons inner-buttons-right" href="#">ABOUT US</a></li>
<li><a class="inner-buttons inner-buttons-right" href="#">HAPPENINGS</a></li>
<li><a class="inner-buttons inner-buttons-right" href="#">CONTACT</a></li></ul>
</span></div>
</div>
</div>
</div>
<div class="row-fluid">
<div id="slider" class="flexslider">
<ul class="slides">
<li>
<img src="{{ url_for('static', filename='images/ProductsSlider.jpg') }}">
</li>
<li>
<img src="{{ url_for('static', filename='images/NaturalSlider.jpg') }}">
</li>
<li>
<img src="{{ url_for('static', filename='images/ExcellSlider.jpg') }}">
</li>
</ul>
</div>
<!--/div-->
</div>
这里是显示在浏览器之间的差异的一些图像看起来:
我使用Bootstrap和JQuery。
感谢您的帮助!
请注意,z-index
仅适用于定位元素(position:absolute
,position:relative
或position:fixed
)。一个适用的小提琴会帮助,但我会建议尝试几个position
调整#inner-navbar
& #slider
。
我试图添加位置元素,它仍然无法正常工作。问题实际上不是导航栏 - 它保持在Safari上滑块的上方。问题是#内部徽标叶不会放在导航栏上方以获得悬垂效果。它由于某种原因被导航栏吞没了。 – manicatorman
很难说明这一点,但我会说你的'z-index:1'&'z-index:-1'即使有些浏览器可能也没有被识别。一个简单的例子:https://jsfiddle.net/9ygwo9yj/1/ - 你可以在绝对''div'上取消对'z-index:-1'的注释,并且它会低于'relative'。 – Syden
作为替代方案,您可以尝试在'#inner-logo'上使用'!important'或更高的'z-index'值,例如'9999',但如果其他人不影响它,则可能无法使用。 – Syden
这大概应该可以解决在Safari -webkit-transform:translate3d(0,0,0);
您的问题,问题是在inner-navbar
类overflow:hidden
元素。我不确定为什么它会在Chrome和Firefox上运行。
请尝试提供一个最小的,完整的和可验证的示例:http://*.com/help/mcve – nvioli