0

我尝试在 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>
4

1 回答 1

0

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

IE8 似乎不喜欢@import-property。

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

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

于 2013-12-12T08:32:45.057 回答