Z-Index 在 Safari 上不起作用 - 在 Firefox 和 Chrome 上很好 [英] Z-Index not working on Safari - fine on Firefox and Chrome

问题描述

Z-index 在 Safari 上无法正确呈现 - 但它在 Chrome 和 Firefox 上运行良好.我无法弄清楚 Safari 特定的错误是什么.

相关代码如下:

.flex-container{显示:inline-flex；对齐项目:居中；对齐内容:居中；}.flex-item{左边距:14%；}#inner-ul2{左边距:70px;}#内部导航栏{z-索引:1；背景颜色:白色；溢出:隐藏；边距顶部:50px；框阴影:0px 10px 10px #444444;}.inner-buttons{背景颜色:白色；溢出:隐藏；颜色:黑色;字体系列:Roboto；字体粗细:300；字体大小:大；}.inner-buttons-left{溢出:隐藏；右边距:45px;}.inner-buttons-right{溢出:隐藏；左边距:40px;}#内标志{位置:固定；z-索引:2；显示:内联块；浮动:无；高度:100px；宽度:120px；边距顶部:-20px；左边距:-25px；右边距:自动；边框右下角半径:10px；边框左下角半径:10px；框阴影:0px 20px 10px -10px #444444;}.navbar .navbar-nav{显示:内联块；浮动:无；垂直对齐:中间；}#滑块{z-索引:-1；填充:0；溢出:隐藏；边框样式:无；边距顶部:30px；边距底部:0px;}

<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 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="#">关于我们</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 class="row-fluid"><div id="slider" class="flexslider"><ul class="slides"><li><img src="{{ url_for('static', filename='images/ProductsSlider.jpg') }}"><li><img src="{{ url_for('static', filename='images/NaturalSlider.jpg') }}"><li><img src="{{ url_for('static', filename='images/ExcellSlider.jpg') }}">

<!--/div-->

这里有一些图片显示了浏览器外观之间的差异:

ChromeSafari

我同时使用 Bootstrap 和 JQuery.

感谢您的帮助！

解决方案

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

The Z-index isn't rendering properly on Safari - but it is working fine on Chrome and Firefox. I can't figure out what the Safari specific bug would be.

Here is the relevant code:

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

And here are some images showing the differences between the browser looks:

Chrome Safari

I am using both Bootstrap and JQuery.

Thanks for the help!

解决方案

This should probably fix your issue on safari -webkit-transform:translate3d(0,0,0);

这篇关于Z-Index 在 Safari 上不起作用 - 在 Firefox 和 Chrome 上很好的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！