css - 问题 :Menu Hide behind PDF in IE

Question

我已经为我的元素创建了菜单栏，在 iframe 中我正在显示 PDF 文件。但是我的菜单隐藏在 PDF 后面(仅在 IE 中)。作为引用，我正在向您发送我的代码，请通过它让我知道我哪里错了。

在此输入代码

<title>Test Sample</title>

<link rel='stylesheet' href='css/style.css'>

<style>
    #tabUL {
        border-bottom: 1px solid #d0d0d0;
        margin: 8px 0px 6px 0px;
        padding: 6px 0px 30px 5px;
        font-size: .9em;
        clear: both;
        font-family: tahoma,verdana;
        position: relative;
        font-size: 13px;
    }

        #tabUL li {
            float: left;
            list-style-type: none;
            padding: 0px;
            margin-right: 1px;
            margin-top: 0px;
            margin-bottom: 0px;
            border: 1px solid #AAA;
            background: #D1D1D1;
            background: -o-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
            background: -ms-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
            background: -moz-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
            background: -webkit-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
            background: linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
            display: inline-block;
            position: relative;
            z-index: 0;
            border-top-left-radius: 14px;
            border-top-right-radius: 14px;
            /*box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), inset 0 0px 0 #FFF;*/
            text-shadow: 0 0px #000;
            margin: 0 -0.5px;
            padding: 0 20px;
        }

            #tabUL li a:not(.currentselected) {
                color: black;
            }

        #tabUL a {
            color: #003366;
            float: left;
            line-height: 14px;
            padding: 6px 24px 8px 10px;
            text-decoration: none;
        }

            #tabUL a:hover {
                color: #7f7f7f;
            }

        #tabUL li.selected {
            background: #FFF;
            color: #333;
            z-index: 2;
            border-bottom-color: #FFF;
            box-shadow: -1px 2px 0 #FFF;
        }

            #tabUL li.selected:before {
                box-shadow: 2px 2px 0 #FFF;
            }

            #tabUL li.selected:after {
                box-shadow: -2px 2px 0 #FFF;
            }

    /* To put Scroll in the rel Tab More menu */
    .reltab-moremenu-content {
        /*font-size: 12px;*/
        font-size: 11px;
        display: none;
        width: 150px;
        height: auto;
        max-height: 100px;
        overflow-y: auto;
        overflow-x: hidden;
        background: #fff;
        list-style-type: none;
        border: 1px solid #ddd;
        position: absolute;
        left: auto;
        margin-left: 0%;
        border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        top: auto;
        padding: 5px 0px;
        border: 1px solid #ccc;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        font-weight: normal;
    }

    #tabUL li:hover ul {
        display: block;
        position: absolute;
        margin: 25px 0px 0px 0px;
        padding: 0;
    }

    #tabUL li:hover li {
        float: none;
        clear: both;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        background: #fff;
        border: 0px #AAA;
        font-family: tahoma,verdana;
        position: relative;
        font-size: 13px;
    }

    #tabMore li {
        float: left;
        list-style-type: none;
        padding: 0px;
        margin-right: 1px;
        margin-top: 0px;
        margin-bottom: 0px;
    }
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<ul id="tabUL">
    <li class="selected" id="li_TabMain36"><a class="selected" id="TabMain36" href="#">Test1</a></li>
    <li id="li_TabRel75"><a id="TabRel75" href="#">Test2</a></li>
    <li id="li_TabRel39"><a id="TabRel39" href="#">Test3</a></li>
    <li id="li_TabRel53"><a id="TabRel53" href="#">Test4</a></li>
    <li><a id="More" href="#">More ◢</a><ul class="reltab-moremenu-content" id="tabMore">
        <li id="More_li_TabRel7" class="tablist11"><a id="TabRel7" href="#">Test A</a></li>
        <li id="More_li_TabRel44"><a id="TabRel44" href="#">Test B</a></li>
        <li id="More_li_TabRel80"><a id="TabRel80" href="#">Test C</a></li>
    </ul>
    </li>
</ul>
<iframe src="http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf" style="width: 100%"></iframe>

Answer 1

您的解决方案 http://jsfiddle.net/tpN7m/3/

 <ul id="tabUL">
<li class="selected" id="li_TabMain36"><a class="selected" id="TabMain36" href="#">Test1</a>
</li>
<li id="li_TabRel75"><a id="TabRel75" href="#">Test2</a>
</li>
<li id="li_TabRel39"><a id="TabRel39" href="#">Test3</a>
</li>
<li id="li_TabRel53"><a id="TabRel53" href="#">Test4</a>
</li>
<li><a id="Mre" href="#">More ◢</a>
    <ul class="reltab-moremenu-content" id="tabMore
    <!--[if IE]><iframe class="cover" src="about:blank"></iframe><![endif]-->

        <li id="More_li_TabRel7" class="tablist11"> 
            <a id="TabRel7" href="#">Test A</a>

        </li>
        <li id="More_li_TabRel44">
            <a id="TabRel44" href="#">Test B</a>

        </li>
        <li id="More_li_TabRel80">
            <a id="TabRel80" href="#">Test C</a>

        </li>
    </ul>
</li>

添加到 CSS:

 .cover {
    border: none;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
}

来源:z-index does not work in Internet Explorer with pdf in iframe