Iframe中的Pdf与Internet Explorer中的顶部导航栏重叠

I am working on asp.net webform with a masterpage. The master page has a top navigation bar and a side bar. beside side bar i called contentplaceholder in which i've put an iframe. in that iframe i am opening the pdf-file "files.pdf" in an iframe; it is working fine with other browsers but when i open this page in internet explorer, the iframe overlaps the top menu :( kindly help me to resolve this issue .

我正在使用主页的asp.net webform。母版页有一个顶部导航栏和一个侧栏。在侧边栏旁边我称为contentplaceholder,其中我放了一个iframe。在iframe我打开iframe中的pdf文件“files.pdf”;它与其他浏览器工作正常,但当我在Internet Explorer中打开此页面时,iframe重叠顶部菜单:(请帮助我解决此问题。

Here is my Master Page Code

这是我的母版页代码

<body>
    <form id="form1" runat="server">
         <div id="wrapper" class="mywrapper">
            <!-- Navigation -->
            <!-- Fixed navbar -->
            <nav class="navbar navbar-default navbar-fixed-top" style="z-index:2;">
              ......
            </nav>
            <div class="row">
                <div class="col-md-3" style="z-index:2;">
                    <div class="navbar-default sidebar" role="navigation">                   
                        <div class="sidebar-nav">
                           ...................
                        </div>
                        <!-- /.sidebar-collapse -->
                    </div>
                    <!-- /.navbar-static-side -->
                </div>

                <div class="col-md-9 col-sm-9 col-lg-9" style="background-color: #FFF; z-index:1;" >
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                    </asp:ContentPlaceHolder>
                </div>
            </div>
    </form>
</body>

Here is my Content aspx Page

这是我的内容aspx页面

    <div class="embed-responsive embed-responsive-16by9" style="height:1000px;">
        <iframe id="myiframe" class="embed-responsive-item" runat="server"  ></iframe>        
    </div>    
</asp:Content>

Here is my Content cs Page

这是我的内容cs页面

protected void Page_Load(object sender, EventArgs e)
{
    string PageToOpen = Request.QueryString.Get("open");
    myiframe.Attributes.Add("src", PageToOpen);
}

1 个解决方案

#1

I think you need to set the iframe wmode to "opaque"

我认为你需要将iframe wmode设置为“opaque”

<iframe ... wmode="opaque"></iframe>

See
z-index does not work in Internet Explorer with pdf in iframe
and
YouTube Video Embedded via iframe Ignoring z-index?

请参阅z-index在Internet Explorer中无法使用iframe中的pdf和通过iframe的YouTube Video Embedded忽略z-index?

Also, it's hard to tell when you don't show us the styles you have defined.
But it's most-likely an issue with the z-index.

此外,当您没有向我们展示您定义的样式时,很难说清楚。但它最可能是z-index的一个问题。

Never mind, seems to be for flash video only.
Just set a div with the height of the navigation bar before the iframe (the blue div).
That way, you shouldn't need the z-index.

没关系,似乎只适用于flash视频。只需在iframe(蓝色div)之前设置一个带有导航栏高度的div。这样,你不应该需要z-index。

<!doctype html>
<html>
<head>
    <title>
        Test
    </title>


    <style type="text/css">


        html, body
        {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }


        .navbar-fixed-top
        {
            position: fixed;
            display: block;
            width: 100%;
            background-color: red;
            height: 50px;
            top: 0px;
        }

        .sidebar
        {
            display: block;
            float: left;
            width: 20%;
            height: 900px;
            background-color: green;
        }

    </style>


</head>
<body>
    <form id="form1" runat="server">
        <div id="wrapper" class="mywrapper">

            <!-- Navigation -->
            <!-- Fixed navbar -->
            <nav class="navbar navbar-default navbar-fixed-top" style="z-index:2;">
                ......
            </nav>
            <div class="row">
                <div class="col-md-3" style="z-index:2;">
                    <div class="navbar-default sidebar" role="navigation">
                        <div class="sidebar-nav">
                            ...................
                        </div>
                        <!-- /.sidebar-collapse -->
                    </div>
                    <!-- /.navbar-static-side -->
                </div>

                <div class="col-md-9 col-sm-9 col-lg-9" style="background-color: #FFF; z-index:1; background-color: yellow;">
                    <div style="display: block; width: 100%; height: 60px; background-color: blue;">aaaa</div>
                    <iframe src="about:blank" frameborder="0" style="width: 80%; height: 500px; border: none;"></iframe>
                </div>
            </div> <!-- End Row -->
        </div><!-- End Wrapper -->
    </form>
</body>
</html>

#1