如何在IE上修复Twitter Bootstrap？

Question

导航栏在IE浏览器中似乎无法正常工作。以下是在IE中的截图。

我已经在stackoverflow.com上查看了许多有关bootstrap的话题，但它们给人们的“帮助”对我不起作用。

在body标签之后：

<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:[e-mail]">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>

- onni82

---

你尝试过这个问题中的指导吗？https://dev59.com/9mkw5IYBdhLWcg3wmrqH - Russ Clarke

看看Facuu7的回答。确保你的HTML页面的第一行是<!DOCTYPE HTML>。 - Gazzini

@OnniBucht请接受下面的答案，它似乎是您正在寻找的。 - Iharob Al Asimi

Answer 1

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

- Facundo Pedrazzini

---

这个可以用。我最开始有一个HTML注释作为第一行，结果Bootstrap就出问题了。我把它删掉了，现在运行得很好。谢谢！ - Gazzini

是的，我可以确认，添加<!DOCTYPE HTML>是有效的。我之前没有添加它，添加了DOCTYPE后它就正常工作了。 - codingbbq

我已经放置了<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">。 - onni82

@OnniBucht：它们不是同一个字符串，<!DOCTYPE html>代表的是HTML5。 - Oerd

我建议进一步阅读有关 DTD 声明的重要性和它们与浏览器处理 HTML 内容的关系的内容，请参考 http://www.w3.org/QA/Tips/Doctype。 - Bassem

我正在使用Bootstrap 3。但它并没有解决我的问题。当我查看源代码时，它显示在页面的第一行。 - johnny

Answer 2

您可以添加 meta 标签：

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

这个链接上简要解释了它是什么以及它是如何工作的。

- tux

---

这对我很有帮助。当我使用开发者工具监视时，我注意到它在“内部网络”上部署时报告以兼容模式运行，但在我的开发机器上不是。 - Chris Townsend

这对我有用，但现在使用Bootstrap 3时菜单出现问题。至少这是更接近的一步（<!DOCTYPE html>对我没有起作用）。 - Chris

Answer 3

为了完整起见，值得注意的是，在Bootstrap 3中，根据文档,请确保在页面中使用以下结构。这解决了我在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>

- SteveChapman

---

非常感谢，这很有帮助。 - arn-arn

Answer 4

需要在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>

- Palanikumar

---

哥们儿，太棒了！它可以工作！太好了！ - Piyush

我认为这只适用于IE9及以上版本，因此不适用于IE8和IE7。 - Hrvoje Golcic

Answer 5

不确定是否能解决你的特定问题，但值得分享。

我在IE中使用Twitter boot strap时遇到了问题。没有圆角。导航菜单未折叠。一些span不在正确位置，甚至有些图片未显示。

奇怪的是，当通过Visual Studio调试器运行站点时，IE可以正常工作，但一旦部署到服务器上就出现了问题。

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

我的问题是由于文档是IE7而浏览器是IE10兼容性而发生的。 我在IIS中添加了一个HTTP头： 名称 X-UA-Compatible 价值 IE=EmulateIE9

现在页面以文档-IE9标准、浏览器IE10兼容性加载，并且所有之前的问题都已解决。

希望这可以帮助。

-tessi

- tessi

---

这对我来说是最好的。谢谢。 - johnny

这不是一个答案。 - Iharob Al Asimi

Answer 6

如果您在内部网络中，并且设置为兼容模式，则只有正确的文档类型和respond.js是不够的。请参考以下链接了解更多信息：强制IE8或IE9文档模式符合标准并查看Ralph Bacon的答案。这与以下情况相同：

<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=edge">

- Emperor Krauser

Answer 7

我曾经遇到同样的问题，其他答案都没有解决我的问题。我的问题很奇怪，即IE9无法连接到任何https站点，因此，由于我使用在线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）

如果使用，respond js和html5 shim适用于IE8。IE9 不需要那个。下面的代码使用了针对ie8及以下版本的标准方法。

--Art

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

- aamarks

---

这是你上次的回答，经过几个小时，你的解决方案帮了我大忙。不确定是什么时候那个框被取消选中的，是我自己操作失误还是IE浏览器的问题，但就是这个原因。非常感谢！ - Norman Bird

一样的事情。我启用了TLS 1，并对IE 9安全证书警告点击了“确定”。以前，所有的Bootstrap下拉菜单都无响应。这使它们在IE8和IE9中都能正常工作。 - Chris Cober

Answer 8

我最近遇到了这个问题，我进行了以下设置更改，对我很有帮助。

- chineerat

Answer 9

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

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

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

在Bootstrap 3中（可能在早期版本中也是如此），该规则位于第5247行。

正如“Internet Explorer的CSS规则限制”所述，样式表最多可以包含4095行。

- Guzman Iglesias

Answer 10

我遇到了类似的问题。 在我的情况下，查看CSS后发现有一个position: initial。 经过一些研究，我发现移动IE浏览器不支持它。 我只需将position: relative替换即可，一切正常运行。

- Renato Oliveira