web-dev-qa-db-ja.com

IEでTwitterブートストラップを修正するにはどうすればよいですか？

IEではnavbarが適切に機能していないようです。これがIEのスクリーンショットです。

screenshot

Stackoverflow.comで多くのbootstrap-topicsを調べてきましたが、それらが人々に提供する「ヘルプ」は私には役に立ちません。

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:[email protected]">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>
twitterinternet-explorer-9twitter-bootstrap
40
onni82

<!DOCTYPE HTML>をHTMLの最初の行に追加します。

65
Facundo Pedrazzini

メタタグを追加できます。

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

これが何であり、どのように機能するかの簡単な説明は、この link にあります。

51
tux

完全を期すために-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>
19
SteveChapman

特定の問題が解決するかどうかはわかりませんが、共有する価値はあります。

IEのTwitterブートストラップに問題がありました。丸い角はありません。ナビゲーションメニューが折りたたみません。一部の画像が表示されない場合でも、スパンが正しい場所にない。

不思議なことに、サイトはIEで問題なく動作するサーバーにデプロイされたVisual Studioデバッガーを実行すると正常に動作します。

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

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

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

お役に立てれば。

-テッシ

6
tessi

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

イントラネット内にいて、設定が互換モードに設定されている場合、適切なdoctypesおよびrespond.jsでは不十分です。

詳細については、このリンクを参照してください： IE8またはIE9文書モードを標準に強制 およびRalph Baconの回答を参照してください。

これと同じになります：

<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
4
Emperor Krauser

最近この問題がありました。これらの設定を変更しました。そしてそれは私のために働いた。 ！

verify these settings

3
chineerat

私は同じ問題を抱えていて、他の答えはどれもうまくいきませんでした。私の問題は、IE9がhttpsサイトに接続できないという奇妙な問題でした。そのため、オンラインのmaxcdn bootstrapファイルは、

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

そのCSSとJSはいずれも適用されていませんでした。 Internet Explorerオプションの[詳細設定]タブに移動して、[use TLS 1.0]をチェックしないとhttpsサイトおよびファイルで問題が発生することを確認し、一度チェックするとbootstrapページが期待どおりにフォーマットされました。

他の人が指摘しているように、以下の適切なDoctypeを使用してください（おそらく有効なhtml4 doctypeが機能しますが、新たに始める場合は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>
3
aamarks

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

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

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

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

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

2
Guzman Iglesias

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

いくつかの調査の後、モバイルIEブラウザはサポートしていません。

私は単にposition: relative代わりに、すべてが正常に機能しました。

1
Renato Oliveira

同様の問題もありました。レイアウトファイルの先頭に次のコード行を配置すると、すべて問題ないようです。

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

レスポンシブレイアウトを使用している場合は、コードに次のjsを含めてみてください。 https://github.com/scottjehl/Respond

0
rizidoro