django和twitter bootstrap在IE8中無法正常工作

我試圖在django模板中使用twitter bootstrap的導航欄。我把以下內容放在「base.html」的頭部。django和twitter bootstrap在IE8中無法正常工作

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

該頁面在鉻中顯示正確。但是當我更改爲IE8時，CSS變得混亂了。「容器」不再居中，導航欄看起來不正確。

然後我試着擺脫django。我搬到了bootstrap.css到base.html文件的文件夾，並改變了CSS加載到：

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

然後我在IE中直接打開base.html文件，一切看起來是正確的一次。因此，在IE8中，django模板呈現以某種方式與引導程序的css混淆。任何想法？謝謝。

======複製來回IE8 「視圖源」 ======

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

===================================== 我剛發現如果我把將下面的代碼放入「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>

來源

2012-05-02 WHY

你可以在IE瀏覽器中發佈「view-source」代碼嗎？ – locoboy

已發佈「查看源代碼」代碼。 – WHY

不應該有任何衝突，你認爲這是渲染沒有意義的事情。擴展和IE8之間沒有任何問題（我說的是經驗之談）。您可能沒有正確配置您的靜態文件。你能分享settings.py和其他相關的東西？另外，請向我們展示您的擴展HTML（也許您誤用了正確的擴展？）。你需要內容塊，使用擴展是不夠的 – yuvi

您是否在使用@import添加樣式表？

IE8似乎不喜歡@ import-property。

我們使用了一個導入必要樣式的全局css文件。將所有樣式表移動到標題並將其包含在普通鏈接標記中時，它就可以工作。

雖然這很奇怪，常規引導樣式（按鈕，背景等）已正確導入。網格系統不是。我想Internet Explorer以神祕和遲鈍的方式工作。

來源

2013-12-12 08:32:45 mahatmanich

django和twitter bootstrap在IE8中無法正常工作

回答

相關問題