Question

我在twitter bootstrap提供的下拉菜单及其样式方面遇到了很多麻烦（在Internet Explorer 8和9中）。

当我浏览官方twitter bootstrap文档http://getbootstrap.com/2.3.2/javascript.html#dropdowns中的下拉示例时，“导航栏内”的下拉列表中有一个漂亮的白色克拉作为下拉列表的一部分，一致的1px边框正确定位，它们之间（边界）和导航栏之间的间距为1px。

与此同时，当我在应用程序中构建导航栏时，白色克拉已经消失，边框不一致且间距不正确。我怀疑后者，下拉“标签”（例如“下拉”，“下拉2”和“下拉3”）正在发生一些事情，因为它们上面的悬停效果（灰色背景）并未填满整个高度导航栏。

以下屏幕截图应说明IE 8中的官方文档与IE 8和Chrome中的测试用例之间的差异：

test case （http://i.imgur.com/x5grl5P.png）

测试用例是作为bootstrap文档中标记的直接副本构建的，带有标准的head / body样板和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>

测试用例是使用twitter bootstrap v2.3.2（从文档下载的标准zip），jQuery v1.10.2和HTML5 Shiv v3.6.2，我从这些版本的旧版开始，没有html shiv（我做的）没想到有帮助，没有运气。

Answer 1

尝试插入

<!-- 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" />

之后

只是在黑暗中拍摄

Twitter引导程序下拉列表在Internet Explorer中没有正确设置样式（根据文档中的示例）

1 个答案: