0

django テンプレートで Twitter ブートストラップのナビゲーション バーを使用しようとしました。「base.html」のheadに以下を入れます。

<link href="{{ STATIC_URL }}bootstrap/css/bootstrap.css" rel="stylesheet">

ページはクロムで正しく表示されます。しかし、IE8 に変更すると、CSS がめちゃくちゃになります。「コンテナ」が中央に配置されなくなり、ナビゲーション バーが正しく表示されなくなります。

それから私はdjangoを取り除こうとしました。bootstrap.css を base.html のフォルダーに移動し、css の読み込みを次のように変更しました。

<link href="bootstrap.css" rel="stylesheet">

次に、base.html を IE で直接開くと、すべてが再び正しく表示されます。そのため、IE8 では、django テンプレートのレンダリングがブートストラップの css を何らかの形で台無しにしているようです。何か案が？ありがとう。

====== IE8 "view-source" からコピー =========

django テンプレートのレンダリング:

<!DOCTYPE html>
<html lang="zh-CN" autopagermatchedrules="1">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>AAA</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">
        <link href="/static/bootstrap/css/bootstrap.css" rel="stylesheet">
        <style>
            body {
              padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
            }
        </style>
    </head>

    <body>
        <div class="navbar navbar-fixed-top">
          <div class="navbar-inner">
            <div class="container">

              <a class="brand" href="/">AAA</a>
              <ul class="nav">
                <li>
                  <a href="/">
                    BBB
                  </a>
                </li>
                <li>
                  <a href="/">
                    CCC
                  </a>
                </li>
              </ul>

            </div>
          </div>
        </div>
    </body>
</html>

django テンプレートのレンダリングなし:

<!DOCTYPE html>
<html lang="zh-CN" autopagermatchedrules="1">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>{% block title %}{% endblock %}</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">
        <link href="bootstrap.css" rel="stylesheet">
        <style>
            body {
              padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
            }
        </style>
    </head>

    <body>
        <div class="navbar navbar-fixed-top">
          <div class="navbar-inner">
            <div class="container">

              <a class="brand" href="/">AAA</a>
              <ul class="nav">
                <li>
                  <a href="/">
                    BBB
                  </a>
                </li>
                <li>
                  <a href="/">
                    CCC
                  </a>
                </li>
              </ul>

            </div>
          </div>
        </div>
    </body>
</html>

=================================== 次のコードを「ベース」に入れると、 .html」を「main.html」に展開すると、IE8ではうまく動作しません。しかし、それらを「main.html」に移動し、django「extend」を使用しない場合は問題ありません。

<!DOCTYPE html>
<html lang="zh-CN" autopagermatchedrules="1">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>{% block title %}{% endblock %}</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">
        <!-- Le styles -->
        <link href="{{ STATIC_URL }}bootstrap/css/bootstrap.css" rel="stylesheet">
        <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
          <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        {% block head %}
        {% endblock %}
        <style>
            body {
              padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
            }
        </style>
    </head>


    <body>
        {% block body %}
        {% endblock %}
    </body>
</html>
4

1 に答える 1

0

@import を使用してスタイル シートを追加していますか?

IE8 は @import-property を気に入らないようです。

必要なスタイルをインポートしたグローバル css ファイルを使用しました。すべてのスタイルシートをヘッダーに移動し、それらを通常のリンク タグに含めると、機能します。

奇妙なことに、通常のブートストラップ スタイル (ボタン、背景など) が適切にインポートされました。グリッドシステムはそうではありませんでした。Internet Explorer は不可思議で遅れた方法で動作すると思います。

于 2013-12-12T08:32:45.057 に答える