Safari浏览器中Z-Index无法正常工作 - 在Firefox和Chrome上正常

Question

在Safari浏览器上，Z-index不能正常渲染，但在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>

下面是一些图片，展示了浏览器外观之间的差异：

Chrome Safari

我正在使用Bootstrap和JQuery。

谢谢帮助！

- manicatorman

---

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

Answer 1

这应该可以解决在safari上的问题 -webkit-transform:translate3d(0,0,0);

- Jayesh

---

请问需要翻译成中文吗？如果是的话，我的翻译如下：了解应该将这个操作应用到哪个元素以及为什么这样做可以解决问题会很有帮助。 - jdhildeb

2022年…仍然存在问题，但已经解决了。 - Christophe

2022...amazing! - John Aps

真的很棒。我被这个问题困扰了一个星期。谢谢。 - Alchemist

Answer 2

如果你在网站上的另一个元素上使用translateZ或translate3d，你可能会发现零值的translate3d没有用处。原来，Safari在确定绘制对象的位置时考虑了被转换对象的Z轴位置，而不是使用z-index。

因此，这将导致第一个div显示在第二个div之上：

<div style="position: fixed; transform: translateZ(100px); z-index: 1;" />
<div style="position: fixed; transform: translate3d(0, 0, 0); z-index: 2;" />

解决方法是对您想要绘制在最上层的元素应用更大的z轴变换：

.on-top {
  transform: translate3d(0, 0, 200px);
}

保留 z-index 的声明，在其他浏览器上仍然是一个好主意。

- coreyward

---

为我解决了一个类似的问题，谢谢。 - Eric

Answer 3

请注意，z-index 仅适用于已定位的元素（ position:absolute，position:relative 或 position:fixed）。建议在 #inner-navbar 和 #slider 上尝试一些 position 调整，这样会更有帮助。请提供一个适用的演示来帮助理解。

- Syden

---

我尝试添加位置元素，但仍然无法正常工作。实际上问题并不在于导航栏 - 在Safari上它仍然位于滑块之上。问题在于#inner-logo叶子不能被放置在导航栏之上，以获得悬挂效果。由于某种原因，它被导航栏吞噬了。 - manicatorman

很难仅凭这个判断，但我会说你的 z-index:1 和 z-index:-1 可能没有被识别，尽管有些浏览器可能会识别。一个简单的例子：https://jsfiddle.net/9ygwo9yj/1/ - 你可以取消注释 absolute div 上的 z-index:-1;，它将会在其 relative 下面。 - Syden

作为替代方案，您可以尝试在#inner-logo上使用!important或更高的z-index值，例如9999，但如果其他元素不受影响，则可能也无法解决问题。 - Syden

Answer 4

我的下拉菜单z-index不起作用，我已经试了很多方法，但都没有成功。Jayesh的回答在我将它添加到CSS类的第一行后给了我提示。

现在问题得到了完美解决。

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

- stoneskin

Answer 5

问题在于 inner-navbar 类上的 overflow:hidden 元素。我不确定为什么它存在时在 Chrome 和 Firefox 上能起作用。

- manicatorman