Bootstrap 导航栏位于嵌入标签后面答案

【问题标题】：Bootstrap navbar goes behind embed tagBootstrap 导航栏位于嵌入标签后面
【发布时间】：2015-08-03 20:00:57
【问题描述】：

我的引导导航栏 (v3.3.2) 和嵌入标签存在问题，我使用它来显示在 mvc5 应用程序中运行时加载的 pdf。发生的情况是，当我单击菜单列表项时，在 Internet Explorer 中它位于嵌入的后面，而在 chrome 或 firefox 中它在上方打开（这是正确的行为）。

菜单项是使用标准引导技术http://getbootstrap.com/components/#navbar创建的

打开pdf文件的cshtml文件包含以下内容：

<div>
    <embed id="pdfContainer" src="@Url.Action("GetFile", new { file = Model.File, description = Model.Description })#view=fitH" wmode="transparent" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html" />
</div>

GetFile 方法只返回一个 FileStreamResults。

我该如何解决这个问题？

更新（重现问题的代码 - 复制/粘贴到 html 文件中，并将底部的 DEMO.PDF 更改为本地硬盘上的 pdf）

<html class=" js flexbox no-flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg no-smil svgclippaths">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PDF - PDF</title>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>

<body class="backgroundBody">
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">PDFs ARCHIVE</a>
            </div>
            <div class="navbar-collapse collapse">

                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a class="dropdown-toggle" role="button" aria-expanded="false" href="#" data-toggle="dropdown">Category <span class="caret"></span></a>

                        <ul class="dropdown-menu" role="menu">
                            <li class="active"><a href="#">Category 1</a></li>
                            <li><a href="#">Category 2</a></li>
                            <li><a href="#">Category 3</a></li>
                            <li><a href="#">Category 4</a></li>
                            <li><a href="#">Category 5</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" role="button" aria-expanded="false" href="#" data-toggle="dropdown">Years <span class="caret"></span></a>
                        <ul class="dropdown-menu scrollable-menu" role="menu">
                            <li><a href="#">2015</a></li>
                            <li class="active"><a href="#">2014</a></li>
                            <li><a href="#">2013</a></li>
                            <li><a href="#">2012</a></li>
                            <li><a href="#">2011</a></li>
                            <li><a href="#">2010</a></li>
                            <li><a href="#">2009</a></li>
                            <li><a href="#">2008</a></li>
                            <li><a href="#">2007</a></li>
                            <li><a href="#">2006</a></li>
                            <li><a href="#">2005</a></li>
                            <li><a href="#">1988</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content marginTop10">
        <div style="margin-top: 100px;">
            <embed id="pdfContainer" src="./demo.pdf" type="application/pdf" style="width: 100%; height: 345px; background-color: red " wmode="transparent" />
        </div>
    </div>
</body>
</html>

【问题讨论】：

检查#pdfContainer 的属性。我假设 z-index 设置得太高了。
没有属性设置为 pdfContainer。我尝试使用 z-index，但在 IE 中没有任何反应

标签： asp.net-mvc html twitter-bootstrap

【解决方案1】：

你要嵌入什么？根据所需的插件以及它在所使用的浏览器中的工作方式，有时嵌入的内容会呈现在页面的 top 上，而不是 in 页面上，如果这是有道理的。换句话说，插件内容甚至不存在于文档的范围内；它只是贴在应该显示的顶部。如果真是这样，那真的是无能为力了。

假设一个最好的情况，你可以影响这一点，你的武器库中唯一的工具几乎就是 CSS z-index 属性。将z-index 菜单设置为像999999999999 这样的高得离谱的值，然后查看它是否可以执行任何操作（请记住，此应用的元素必须全部具有position:relative 或position:absolute，否则它不会不做任何事情）。如果它超过了嵌入，那么您可以退回到一个更合理的值，仍然将它放在嵌入之上。如果它什么都不做，那么您可能处于第一种情况，并且几乎处于一个围绕其轴螺旋缠绕的倾斜平面上。有大爆炸理论的粉丝吗？ ;)

【讨论】：

当我们看不到可复制的示例时，很难诊断。

【解决方案2】：

您没有在此问题中提及 Internet Explorer 版本。所以我没有费心去测试你后来添加的测试用例。

我之前曾多次看到并修复过类似的问题，适用于 Internet Explorer 直至并包括 v9。版本 10 及更高版本通常没问题。这是一个例子（查看源代码）：aix4admins.blogspot.com/

如果问题仅出现在 Internet Explorer v9 及以下版本中，请尝试使用以下 JavaScript 修复它。它将主要内容（您的 pdf）推送到所有内容的后面（z-index: -1;）。或者，如果您的页面正文设置了background-color 及其z-index: 0，请尝试使用z-index:0;。

带有 pdf 的内容容器 (.container.body-content) 的 position 属性必须为 relative（或 absolute）。

此外，如果您的主要内容（pdf）在您的下拉菜单中没有显示出来，您也不需要第二次修复（设置背景颜色的 CSS 规则）。所以var css = '.container.body-content {z-index: -1;}'; 应该没问题。

编辑：在结束 body 元素之前插入：

<script>
    if (typeof document.documentMode === 'number' // Internet Explorer?
        && typeof document.body.style.transition === 'undefined') { // Up to and including IE9.

        // Create a new <style></style> tag.
        var ie_style_fix = document.createElement('style');
        ie_style_fix.type = 'text/css';
        ie_style_fix.id = 'ie-fix1';

        // The 2 fixes.
        var css = '.container.body-content {z-index: -1;}' + '.navbar .nav.navbar-nav > .dropdown > .dropdown-menu > li {background-color: rgb(191, 1, 0);}';
        // Insert the 2 fixes into the new style tag.
        if (ie_style_fix.styleSheet) {
            ie_style_fix.styleSheet.cssText = css;
        } else {
            ie_style_fix.appendChild(document.createTextNode(css));
        }

        document.getElementsByTagName('head')[0].appendChild(ie_style_fix);
    }
</script>

【讨论】：

我在 W7 上使用 IE11 进行了尝试。我尝试了您的代码，但它不起作用...如果由于链接错误导致 pdf 丢失，我可以看到菜单，但是当 pdf出现菜单在它后面。
我的 JS 在 IE9 之后的任何 Internet Explorer 版本中都无法运行。您需要完全删除外部 if 语句。或者将外部 if 语句更改为：if (typeof document.documentMode === 'number) {' // Internet Explorer? 或者，而不是整个 JS，只在你的 CSS 中添加 CSS 行，在 .body-content 类的最后一条规则.container.body-content {z-index: -1;} 之后，如果还没有，你必须还将 CSS 属性 position: relative; 添加到具有 .body-content 类的元素中。 .container.body-content { position:relative; z-index: -1; }
另一件可能破坏这一点的事情是，PDF 文件需要更长的时间来加载，然后设置一个更高的z-index，覆盖 CSS 文件中的那个。如果是这种情况，您需要执行类似于 Desandro 的 imagesLoaded 的操作
为了避免这种情况（加载时间长），我尝试使用浏览器检查器设置各种 div 的 z-index，但结果始终相同

【解决方案3】：

一种解决方案是使用PDF.js 将PDF 从客户端javascript 直接呈现到浏览器中，而不是使用<object ...> 或<embed ..> 标记。您只能对 IE 9/10 有条件地执行此操作。这也意味着您不再需要安装 Acrobat 插件。

【讨论】：