Question

我遇到了bootstrap navbar（v3.3.2）和我用来显示在运行时在mvc5应用程序中加载的pdf的embed标签的问题。当我点击一个菜单列表项时，在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文件中复制/粘贴，并在本地硬盘上使用pdf更改底部的DEMO.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>

Answer 1

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

假设一个最佳案例场景，你可以影响这一点，你的武器库中唯一的工具就是CSS z-index属性。将z-index菜单设置为像999999999999这样可笑的高值，并查看它可以执行任何操作（请记住，应用此元素的所有元素都必须具有position:relative或{ {1}}或者它不会做任何事情）。如果它超过嵌入，那么你可以退回到一个更合理的值，仍然将它放在嵌入上。如果它什么都不做，那么你可能在第一个场景中，并且几乎在一个倾斜的平面上围绕它的轴螺旋缠绕。任何大爆炸理论粉丝都在那里？ ;）

Answer 2

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

我之前见过几次类似的修复，因为Internet Explorer包括v9。版本10及以上通常都可以。以下是一个示例（查看来源）：aix4admins.blogspot.com/

如果问题仅发生在Internet Explorer（包括v9）中，请尝试使用以下JavaScript进行修复。它将主要内容（即您的pdf）推到一切（z-index: -1;）。如果您网页的正文设置为z-index:0;及其background-color，请尝试使用z-index: 0。

内容容器position的{{1}}属性（pdf）必须为.container.body-content（或relative）。

如果您的主要内容（pdf）在浏览时没有通过您的下拉菜单显示，那么您也不会需要第二个修补程序（设置背景颜色的CSS规则）。所以absolute可能没问题。

编辑：在结束var css = '.container.body-content {z-index: -1;}';元素之前插入：

body

Answer 3

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

Bootstrap导航栏落后于embed标签

3 个答案: