web-dev-qa-db-ja.com

Z-IndexがSafariで機能しない-FirefoxおよびChrome

ZインデックスはSafariで正しくレンダリングされません-しかし、ChromeおよびFirefoxでは正常に動作しています。Safari固有のバグがどうなるかわかりません。

関連するコードは次のとおりです。

.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>

そして、これはブラウザの外観の違いを示すいくつかの画像です：

ChromeSafari

BootstrapとJQueryの両方を使用しています。

助けてくれてありがとう！

htmlcsstwitter-bootstrapsafariz-index
13
manicatorman

これはおそらくサファリの問題を修正するでしょう-webkit-transform:translate3d(0,0,0);

9
Jayesh

z-indexは、配置された要素（position:absolute、position:relative、またはposition:fixed）でのみ機能することに注意してください。該当するフィドルは役立ちますが、#inner-navbarと#sliderをいくつかposition微調整することをお勧めします。

5
Syden

問題は、overflow:hiddenclassのinner-navbar要素です。 ChromeとFirefoxが動作しているのに、なぜ動作したのかわかりません。

1
manicatorman

ドロップダウンメニューがありますが、z-indexが機能しません。そして、私は何時間もさまざまなことに挑戦しましたが、すべてうまくいきません。 Jayeshの答えは、CSSクラスの最初の行に追加した後、私にヒントを与えます

チャームのように固定しました。

{
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
position: absolute;
z-index: 1000;

}

0
stoneskin