Bootstrap navbar идет за встроенным тегом

У меня проблема с загрузочным навигатором (v3.3.2) и тегом embed, который я использую для отображения pdf-файла, загруженного во время выполнения в приложении mvc5. Что происходит, когда я нажимаю элемент меню, в Internet Explorer он идет за вставкой, а в chrome или firefox он открывается выше (это правильное поведение).Bootstrap navbar идет за встроенным тегом

пункты меню создаются с использованием стандартных методов бутстраповского http://getbootstrap.com/components/#navbar

cshtml файл, который открывает файл в формате PDF содержит следующее:

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

Как я могу исправить эту проблему?

UPDATE (код, который воспроизвести проблему - копировать/вставить в 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>

источник

2015-02-06 Manfrons

Проверьте свойства #pdfContainer. Я предполагаю, что индекс z слишком высок. – Aibrean

, что свойства pdfContainer отсутствуют. Я пробовал с z-index, но ничего не происходит в IE – Manfrons

Что вы встраивание? В зависимости от требуемого плагина и того, как он работает в используемом браузере, иногда содержимое вставки отображается на вверху страницы, а не в пределах страницы, если это имеет смысл. Другими словами, содержимое плагина даже не существует в рамках документа; это просто штукатурка сверху, где она должна быть показана. Если это так, то в этом нет ничего, что можно было бы сделать.

Предполагая, что лучший сценарий, где вы можете повлиять на это, единственный инструмент в вашем арсенале - это в значительной степени свойство CSS z-index. Установите меню z-index на смехотворно высокое значение, например 999999999999, и посмотрите, что он делает что-нибудь вообще (имейте в виду, что элемент, к которому он применяется, должен либо иметь position:relative, либо position:absolute, либо он ничего не сделает). Если он перейдет в embed, то вы можете отступить к более разумному значению, которое все еще помещает его поверх встраивания. Если он ничего не делает, то вы, вероятно, в первом сценарии, и в значительной степени на наклонной плоскости, обернутой спирально вокруг своей оси. Есть поклонники Теории Большого Взрыва? ;)

источник

2015-02-06 16:57:03

Я пробовал, но он не работает. – Manfrons

Трудно диагностировать, когда мы не можем увидеть реплицируемый пример. – Aibrean

Я только что обновил сообщение ... thx для любой помощи – Manfrons

Вы не упомянули версию (-и) Internet Explorer с этой проблемой. Так что я не стал тестировать тестовый файл, который вы добавили позже.

Я видел и фиксировал аналогичные несколько раз раньше, для Internet Explorer до и включая v9. Версия 10 и выше, как правило, в порядке. Вот пример (посмотреть исходный код): aix4admins.blogspot.com/

Если проблема возникает только в Internet Explorer до версии v9 и включает в себя, попытайтесь исправить ее со следующим JavaScript. (z-index: -1;). Или попробуйте с z-index:0;, если у вашей страницы есть комплект background-color и его z-index: 0.

position свойство контейнера контента (.container.body-content) с PDF, должны быть relative (или absolute).

Также вам не понадобится второе исправление (правило CSS, которое устанавливает цвет фона), если ваше основное содержимое (pdf) не отображается в раскрывающихся списках, когда они переходят через него. Таким образом, var css = '.container.body-content {z-index: -1;}';, вероятно, ОК.

EDIT: Вставить непосредственно перед элементом закрытия 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>

источник

2015-03-19 21:01:13

Я пробовал его с IE11 на W7.I пробовал ваш код, но он не работает ... если pdf отсутствует из-за слишком плохой ссылки, я могу см. menù, но когда появится pdf, меню позади. – Manfrons

My JS не будет работать в любой версии Internet Explorer позже IE9. Вам нужно полностью удалить внешнюю инструкцию 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 { позиция: относительная; z-index: -1; } ' –

Другая вещь, которая может саботировать это, заключается в том, что файл PDF занимает больше времени для загрузки, а затем устанавливает более высокий' z-index', переопределяя его в файле CSS. Если это так, вам нужно сделать что-то похожее на Desandro [imagesLoaded] (http://imagesloaded.desandro.com/) –

Одним из решений является использование PDF.js для визуализации PDF непосредственно в браузере с клиентской стороны JavaScript, а не <object ...> или <embed ..> тега , Вы можете сделать это условно только для IE 9/10. Это означает также, что вам больше не нужен плагин Acrobat для установки.

источник

2015-08-03 12:00:57 shuckc

Bootstrap navbar идет за встроенным тегом

ответ

Смежные вопросы