twitter - 如何在 IE 上修复 twitter-bootstrap？

Question

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

我一直在查看 stackoverflow.com 上的许多引导主题，但他们给人们的“帮助”对我不起作用。

身体标签后：

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

score 65 · Accepted Answer

65

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

于 2012-09-12T18:53:07.347 回答

score 51 · Accepted Answer

您可以添加元标记：

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

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

score 19 · Accepted Answer

仅出于完整性考虑 - 值得注意的是，使用 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>

score 6 · Accepted Answer

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>

score 6 · Accepted Answer

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

我在 IE 中遇到了 Twitter 引导带的问题。没有圆角。导航菜单未折叠。跨度不在正确的位置，甚至有些图像没有显示。

奇怪的是，当通过 Visual Studio 调试器运行时，站点在 IE 中运行良好，一旦部署到出现问题的服务器上。

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

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

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

希望这可以帮助。

-泰西

score 4 · Accepted Answer

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

请参阅此链接以获取更多信息：强制 IE8 或 IE9 文档模式符合标准并查看 Ralph Bacon 的答案。

这将与此相同：

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

score 3 · Accepted Answer

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

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

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

正如其他人所指出的那样，请使用下面的正确文档类型（也许有效的 html4 文档类型会起作用，但如果您重新开始，不妨使用 html5。）

响应 js 和 html5 垫片（如果使用）适用于 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>

score 3 · Accepted Answer

3

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

验证这些设置

于 2015-06-11T23:11:52.483 回答

score 2 · Accepted Answer

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

这是为导航栏项目设置浮动属性的引导导航栏样式规则：

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

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

正如这里所说：Internet Explorer 的 CSS 规则限制，一个工作表最多可以包含 4095 行。

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

I was having a similar issue. In my case, looking at the CSS i found a position: initial.

After some research, i found that mobile IE browser doesn't supports it.

I simply put a position: relative instead and everything worked fine.

score 0 · Accepted Answer

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

score -1 · Accepted Answer

-1

请将页面放在本地主机中并尝试

于 2018-05-06T07:13:05.660 回答

twitter - 如何在 IE 上修复 twitter-bootstrap？

13 回答 13

Related

Reference