Question

导航栏似乎在IE中无法正常工作。这是IE中的截图。

screenshot

我一直在浏览stackoverflow.com上的许多bootstrap主题，但是他们给予人们的“帮助”并不适合我。

身体标签后：

<div class="container">
    <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="brand" href="?id=home">OnniServer.tk</a>
                    <div class="nav-collapse">
                    <ul class="nav">
                    <li <?php if ((isset($_GET['id'])) && ($_GET['id'] == home)) { echo "class='active'"; } ?>><a href="?id=home">Home</a></li>
                    <li <?php if ((isset($_GET['id'])) && ($_GET['id'] == donate)) { echo "class='active'"; } ?>><a href="?id=donate">Donate</a></li>
                    <li <?php if ((isset($_GET['id'])) && ($_GET['id'] == about)) { echo "class='active'"; } ?>><a href="?id=about">About</a></li>
                    <li <?php if ((isset($_GET['id'])) && ($_GET['id'] == staff)) { echo "class='active'"; } ?>><a href="?id=staff">Staff</a></li>
                    <li <?php if ((isset($_GET['id'])) && ($_GET['id'] == vote)) { echo "class='active'"; } ?>><a href="?id=vote">Vote</a></li>
                    <li class="dropdown">
                        <a href="" class="dropdown-toggle" data-toggle="dropdown">Play now: <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="minecraft">In browser</a></li>
                                <li><a href="http://minecraft.net">Buy it now</a></li>
                                <li><a href="#">No link for crack</a></li>
                            </ul>
                    </li>
                    <li class="dropdown">
                        <a href="" class="dropdown-toggle" data-toggle="dropdown">Perms for: <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="?id=citizen">Citizen(s)</a></li>
                                <li><a href="?id=vip">VIP(s)</a></li>
                                <li><a href="?id=vipplus">VIP+(s)</a></li>
                                <li><a href="?id=modjr">Jr. Moderator(s)</a></li>
                                <li><a href="?id=mod">Moderator(s)</a></li>
                                <li><a href="?id=admin">Admin(s)</a></li>
                                <li><a href="?id=owner">Owner</a></li>
                            </ul>
                    </li>
                    <li class="dropdown">
                        <a href="" class="dropdown-toggle" data-toggle="dropdown">Mail to: <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="mailto:onni.bucht@me.com">Onni (server Owner)</a></li>
                            </ul>
                    </li>
                    <script>
                        $('.dropdown-toggle').dropdown()
                    </script>
                    </ul>
                    </div>
                </div>
            </div>
    </div>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <div class="hero-unit">
        <style "text/css">
        </style>
        <?php
        if (((isset($_GET['id'])) &&($_GET['id'] == home)) || (!isset($_GET['id']))) { include('home.php'); };
        if ((isset($_GET['id'])) && ($_GET['id'] == donate)) { include('donate.php'); };
        if ((isset($_GET['id'])) && ($_GET['id'] == about)) { include('about.php'); };
        if ((isset($_GET['id'])) && ($_GET['id'] == staff)) { include('staff.php'); };
        if ((isset($_GET['id'])) && ($_GET['id'] == vote)) { include('vote.php'); };
        if ((isset($_GET['id'])) && ($_GET['id'] == citizen)) { include('permissions/citizen.html'); };
        if ((isset($_GET['id'])) && ($_GET['id'] == vip)) { include('permissions/vip.html'); };
        if ((isset($_GET['id'])) && ($_GET['id'] == vipplus)) { include('permissions/vipplus.html'); };
        if ((isset($_GET['id'])) && ($_GET['id'] == modjr)) { include('permissions/modjr.html'); };
        if ((isset($_GET['id'])) && ($_GET['id'] == mod)) { include('permissions/mod.html'); };
        if ((isset($_GET['id'])) && ($_GET['id'] == admin)) { include('permissions/admin.html'); };
        if ((isset($_GET['id'])) && ($_GET['id'] == owner)) { include('permissions/owner.html'); };
        ?>
    </div>
</div>

Answer 1

您需要将<!DOCTYPE HTML>放在HTML的第一行。

Answer 2

您可以添加元标记：

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

在link上可以找到关于它是什么以及如何工作的简要说明。

Answer 3

为了完整起见 - 值得注意的是，使用Bootstrap 3 as per the docs，请确保页面中包含以下结构。它解决了我在使用IE9和v3时遇到的问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- content -->
</body>
</html>

Answer 4

不确定它是否会解决您的特定问题，但无论如何都值得分享。

我在IE浏览器中遇到了问题。没有圆角。导航菜单没有折叠。没有坐在正确的位置，甚至一些图像没有显示。

奇怪的是，当通过visual studio调试器运行时，网站在IE中工作正常，它曾经部署到发生问题的服务器上。

尝试使用IE开发人员工具（F12是键盘快捷键）检查浏览器模式和文档模式。（它位于菜单栏的顶部）

问题发生在我身上，因为文件是IE7，浏览器是IE10的兼容性。我在IIS中添加了一个http标头：名称 X-UA兼容值 IE = EmulateIE9

现在页面加载为文档 - IE9标准，浏览器IE10兼容性和所有以前的问题都得到解决。

希望这有帮助。

-tessi

Answer 5

需要为IE

包含这两个脚本

<script src="http://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="http://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>

Answer 6

如果您在Intranet中并且设置设置为兼容模式，那么正确的doctypes和respond.js是不够的。

请参阅此链接了解更多信息：Force IE8 or IE9 document mode to standards并参阅Ralph Bacon的回答。

与此相同：

Reversed

Answer 7

我遇到了同样的问题，其他答案都没有。我的问题是一个奇怪的问题，其中IE9无法连接到任何http s 站点，因此我使用的是在线maxcdn引导程序文件，如

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css

没有一个css和js被应用。进入Internet Explorer选项的“高级”选项卡，我确认未选中“使用TLS 1.0”导致https站点和文件出现问题，并且一旦检查，我的引导页面就按预期格式化了。

正如其他人已经注意到的那样使用下面正确的doctype（也许有效的html4 doctype会起作用，但是如果你重新开始，也可以使用html5。）

响应js和html5 shim（如果使用的话）是针对IE8的。 IE9 不需要。以下代码使用标准方法ie8及以下。

- 艺术

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<!-- content -->
</body>
</html>

Answer 8

Internet Explorer具有样式表识别的最大代码行数。

这是Bootstrap导航栏样式规则，用于设置导航栏项的浮动属性：

.navbar-nav > li {
    float: left;
}

Bootstrap 3中的规则（可能在早期版本中）也在第5247行。

如上所述：Internet Explorer's CSS rules limits，工作表最多可包含4095行。

Answer 9

我最近遇到了这个问题。我改变了这些设置。它对我有用。！

verify these settings

Answer 10

我也有类似的问题。我把以下代码行放在我的布局文件的头部，一切似乎没问题。

<meta http-equiv="X-UA-Compatible" content="IE=9">

Answer 11

我遇到了类似的问题。在我的情况下，看着CSS我找到了position: initial。

经过一番研究，我发现移动IE浏览器不支持它。

我只是改为position: relative而且一切正常。

Answer 12

如果您使用自适应布局，请尝试在代码中包含此js：https://github.com/scottjehl/Respond

Answer 13

请将页面放在localhost中并尝试

如何在IE上修复twitter-bootstrap？

13 个答案: