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>

这里是显示在浏览器之间的差异的一些图像看起来：

Chrome Safari

我使用Bootstrap和JQuery。

感谢您的帮助！

来源

2016-11-30 manicatorman

请尝试提供一个最小的，完整的和可验证的示例：http://stackoverflow.com/help/mcve – nvioli

请注意，z-index仅适用于定位元素（position:absolute,position:relative或position:fixed）。一个适用的小提琴会帮助，但我会建议尝试几个position调整#inner-navbar & #slider。

来源

2016-11-30 18:26:26 Syden

我试图添加位置元素，它仍然无法正常工作。问题实际上不是导航栏 - 它保持在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);

来源

2016-11-30 19:01:27 Jayesh

您的问题，问题是在inner-navbar类overflow:hidden元素。我不确定为什么它会在Chrome和Firefox上运行。

来源

2016-11-30 19:56:27 manicatorman

Z-Index不适用于Safari - 适用于Firefox和Chrome

回答

相关问题