2012-05-02 29 views
0

djangoのテンプレートにtwitterブートストラップのナビゲーションバーを使用しようとしました。私は "base.html"の頭に以下を入れました。djangoとtwitterのブートストラップがIE8で正しく動作しない

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

ページがクロムの中で正しく見えます。しかし、私がIE8に変更すると、CSSが乱れてしまいます。 「コンテナ」はもうセンタリングされず、ナビゲーションバーは正しく表示されません。

私はジャンゴを取り除こうとしました。私はbase.htmlのフォルダにbootstrap.cssを移動し、CSSへの負荷を変更:その後、私は直接IEでbase.htmlを開き、すべてが再び正しいよう

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

。だからIE8のようだ、djangoのテンプレートレンダリングは何とかブートストラップのCSSを台無しにしている。何か案が?ありがとう。 DjangoテンプレートのレンダリングとIE8 "ビュー・ソース" =========

あちこちにコピー

======:

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

=================== 私はちょうど私が次のコードを "base.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> 
+2

"view-source"コードを両方のケースでIEに投稿できますか? – locoboy

+0

"view-source"コードが掲載されています。 – WHY

+0

何も衝突があってはならない、あなたはレンダリングで何かが理にかなっていないという前提です。拡張とIE8の間に問題はありません(私はそれが経験不足だと言っています)。静的ファイルを正しく構成していない可能性があります。 settings.pyや他の関連するものを共有できますか?また、あなたの拡張HTMLを教えてください。コンテンツブロックが必要です。拡張機能を使用するには十分ではありません – yuvi

答えて

0

あなたのスタイルシートを追加するには、あなたは@importを使用していますか?

IE8は@ import-propertyを好きではないようです。

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

普通のブートストラップスタイリング(ボタン、背景など)は正しくインポートされています。グリッドシステムはそうではありませんでした。私は、Internet Explorerが不思議で遅滞した方法で動作すると思います。

関連する問題