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/ - вы можете раскомментировать 'z-index: -1;' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' ''. – Syden

В качестве альтернативы вы можете попробовать использовать '! Important' или более высокое значение' z-index', например '9999', на' # inner-logo', но если другие не влияют, это может и не работать. – Syden

Это, вероятно, следует устранить проблему на сафари -webkit-transform:translate3d(0,0,0);

источник

2016-11-30 19:01:27 Jayesh

Проблема заключается в overflow:hidden элемент на inner-navbar класса. Я не уверен, почему он работал в Chrome и Firefox с присутствием.

источник

2016-11-30 19:56:27 manicatorman

Z-Index не работает в Safari - отлично работает в Firefox и Chrome

ответ

Смежные вопросы