Щебетать Bootstrap Выпадающие списки не правильно строятся в Internet Explorer (как в примерах в документах)

У меня проблемы с раскрывающимися меню, предоставляемыми twitter bootstrap и их стилем (в Internet Explorer 8 и 9).Щебетать Bootstrap Выпадающие списки не правильно строятся в Internet Explorer (как в примерах в документах)

Когда я просматриваю раскрывающийся пример в официальной документации по загрузке twitter http://getbootstrap.com/2.3.2/javascript.html#dropdowns, выпадающие списки из «в пределах навигационной панели» имеют красивый белый карат как часть выпадающего, согласованной границы 1px и расположены правильно с 1px пробелом между собой (граница) и навигационной панелью.

Между тем, когда я строю navbar как часть моего приложения, белый карат ушел, граница не соответствует, а интервал неверен. Я подозреваю, что последнее происходит с выпадающими «ярлыками» (например, «Dropdown», «Dropdown 2» и «Dropdown 3»), поскольку эффект наведения (серый фон) на них не заполняет всю высоту навигационная панель.

Следующий скриншот должен проиллюстрировать разницу между официальной документации в IE 8, и мой тестовый случай в IE 8 и Chrome:

test case (http://i.imgur.com/x5grl5P.png)

Тестовый пример был построен в качестве прямого копирования разметки от начальной загрузки документации, со стандартной головкой/шаблонного тела и JS/CSS активов, Я загрузил его в качестве сущности: https://gist.github.com/galvanist/6121685

<!DOCTYPE html> 

<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Test</title> 
     <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> 
     <!--[if lt IE 9]> 
      <script src="./js/html5shiv.js" type="text/javascript"></script> 
     <![endif]--> 
     <link href="./css/bootstrap.min.css" media="all" rel="stylesheet" type="text/css" /> 
    </head> 

    <body> 

    <div class="container"> 
     <h1>Bootstrap Dropdown Test</h1> 
      <div id="navbar-example" class="navbar navbar-static"> 
       <div class="navbar-inner"> 
       <div class="container" style="width: auto;"> 
        <a class="brand" href="#">Project Name</a> 
        <ul class="nav" role="navigation"> 
        <li class="dropdown"> 
         <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
         <ul class="dropdown-menu" role="menu" aria-labelledby="drop1"> 
         <li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Action</a></li> 
         <li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Another action</a></li> 
         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> 
         <li role="presentation" class="divider"></li> 
         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> 
         </ul> 
        </li> 
        <li class="dropdown"> 
         <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a> 
         <ul class="dropdown-menu" role="menu" aria-labelledby="drop2"> 
         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> 
         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> 
         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> 
         <li role="presentation" class="divider"></li> 
         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> 
         </ul> 
        </li> 
        </ul> 
        <ul class="nav pull-right"> 
        <li id="fat-menu" class="dropdown"> 
         <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a> 
         <ul class="dropdown-menu" role="menu" aria-labelledby="drop3"> 
         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> 
         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> 
         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> 
         <li role="presentation" class="divider"></li> 
         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> 
         </ul> 
        </li> 
        </ul> 
       </div> 
       </div> 
      </div> <!-- /navbar-example --> 
    </div> <!-- /container --> 

    <!-- Placed at the end of the document so the pages load faster --> 
    <script src="./js/jquery.min.js" type="text/javascript"></script> 
    <script src="./js/bootstrap.min.js" type="text/javascript"></script> 

    </body> 
</html>

тестовый пример использует щебетать б ootstrap v2.3.2 (стандартный zip, загруженный из документов), jQuery v1.10.2 и HTML5 Shiv v3.6.2, я начал с более старых версий этих и без html shiv (что, как мне кажется, не помогает), без везения ,

источник

2013-07-31 Gavin

попробуйте вставить

<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> 
     <!--[if lt IE 9]> 
     <script src="./js/html5shiv.js" type="text/javascript"></script> 
<![endif]-->

после <link href="./css/bootstrap.min.css" media="all" rel="stylesheet" type="text/css" />

просто выстрел в темноте

источник

2013-07-31 17:13:22

Ницца предложение, я пытался переместить html5 заточку и другие JavaScripts вокруг; все в голове, все в конце тела; без везения. Глядя на Internet Explorer, Dev Tools предлагает, что shiv загружается в IE 8 в порядке. Я замечаю, что те же артефакты появляются на компьютере коллег с IE 9, и я не считаю, что shiv необходим/загружен для этой версии IE. – Gavin

Щебетать Bootstrap Выпадающие списки не правильно строятся в Internet Explorer (как в примерах в документах)

ответ

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