twitter - IE で twitter-bootstrap を修正するにはどうすればよいですか?

Question

ナビゲーション バーが IE で正しく機能していないようです。これはIEでのスクリーンショットです。

私はstackoverflow.comで多くのブートストラップトピックを調べてきましたが、彼らが人々に与える「助け」は私にとってはうまくいきません.

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

それが何であり、どのように機能するかについての簡単な説明は、このリンクにあります。

Answer 3

完全を期すために-Bootstrap 3では、 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のTwitterブートストラップに問題がありました。角が丸くない。ナビゲーションメニューが折りたたまれていません。一部の画像が表示されていない場合でも、スパンが正しい位置に配置されていません。

不思議なことに、サイトはVisual Studioデバッガーを介して実行すると、IEで正常に機能します。サーバーにデプロイすると、問題が発生します。

IE開発ツールを使用してみてください（F12はキーボードショートカットです）ブラウザモードとドキュメントモードを確認してください。（メニューバーの横の上部にあります）

ドキュメントがIE7で、ブラウザがIE10と互換性があるため、問題が発生しました。IISにhttpヘッダーを追加しました：名前X-UA-互換性のある値IE = EmulateIE9

これで、ページがドキュメントとして読み込まれます-IE9標準、ブラウザーIE10の互換性、および以前のすべての問題が解決されました。

お役に立てれば。

-テッシ

Answer 5

IE 用にこれら 2 つのスクリプトを含める必要があります

<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

私は同じ問題を抱えていましたが、他の答えはどれもうまくいきませんでした。私の問題は、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 7

私は最近この問題を抱えていました。これらの設定を変更しました。そして、それは私のために働きました。!

Answer 8

Internet Explorer には、スタイル シート認識用のコード行の最大数があります。

これは、navbar アイテムの float プロパティを設定する Bootstrap navbar スタイル ルールです。

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

Bootstrap 3 (おそらく初期バージョンでも) のそのルールは 5247 行にあります。

ここにあるように: Internet Explorer の CSS ルールの制限、シートには最大 4095 行を含めることができます。

Answer 9

私は同様の問題を抱えていました。私の場合、CSS を見るとposition: initial.

いくつかの調査の結果、モバイル IE ブラウザーはそれをサポートしていないことがわかりました。

position: relative代わりに a を入れるだけで、すべて正常に機能しました。

Answer 10

私も同様の問題を抱えていました。レイアウト ファイルの先頭に次のコード行を追加しましたが、問題ないようです。

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