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

回答

相關問題