Question

我尝试在django模板中使用twitter bootstrap的导航栏。我把以下内容放在“base.html”的头部。

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

该页面在chrome中看起来正确。但是当我改为IE8时，CSS搞砸了。 “容器”不再居中，导航栏看起来不正确。

然后我试着摆脱django。我将bootstrap.css移动到base.html的文件夹中，并将css加载更改为：

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

然后我直接在IE中打开base.html，一切看起来都正确了。所以在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>

===================================== 我刚刚发现如果我将以下代码放入“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>

Answer 1

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

IE8似乎不喜欢@ import-property。

我们使用了导入必要样式的全局css文件。将所有样式表移动到标题并使用普通链接标记包含它们时，它可以正常工作。

虽然很奇怪，常规引导样式（按钮，背景等）已正确导入。网格系统不是。我猜Internet Explorer以神秘和迟钝的方式工作。

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

1 个答案: