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

【问题标题】：Pdf in Iframe overlapping top navigation bar in internet explorerIframe 中的 Pdf 与 Internet Explorer 中的顶部导航栏重叠
【发布时间】：2016-08-29 10:35:13
【问题描述】：

我正在处理带有母版页的 asp.net 网络表单。母版页有一个顶部导航栏和一个侧栏。在边栏旁边，我调用了 contentplaceholder，我在其中放置了一个 iframe。在那个 iframe 中，我在 iframe 中打开 pdf 文件“files.pdf”；它在其他浏览器上运行良好，但是当我在 Internet Explorer 中打开此页面时，iframe 与顶部菜单重叠 :( 请帮助我解决此问题。

这是我的主页代码

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

这是我的内容 aspx 页面

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

这是我的内容 cs 页面

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

【问题讨论】：

标签： html css asp.net internet-explorer iframe

【解决方案1】：

我认为您需要将 iframe wmode 设置为“不透明”

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

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

此外，如果您不向我们展示您定义的样式，我们很难判断。
但这很可能是 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>

【讨论】：

它显示错误 wmode 不是 iframe 元素的有效属性
@Alina Anjum：然后在 iframe 之前放置一个适当高度的 div。这样 iframe 就会被向下推，并且您不需要 z-index。顺便说一句：那是巴基斯坦人的名字还是 Quatari 人的名字？
是的，我正在尝试同样的先生，谢谢。它的巴基斯坦名字:)
@Alina Anjum：祝你好运，别叫我“先生”，我不是你的老板，也不是那么老）））
@Alina Anjum：你为什么这样做？多次问同一个问题毫无意义——它通常不会更快地得到答案。相反，为一个问题添加更多细节，以便可以轻松重现该问题 - 然后您将更快地得到答案。当您不提供样式时，例如navbar-fixed-top 做了什么，那么重现问题很耗时，而且我们都有截止日期的日常工作。另外，正确标记它。如果您将其标记为 HTML & CSS & InternetExplorer，您可能会更快地得到更好的答案。您的问题与 C# 关系不大