J'ai essayé d'utiliser la barre de navigation de bootstrap twitter dans le modèle de django. J'ai mis ce qui suit dans la tête du "base.html".django et bootstrap twitter ne fonctionne pas correctement dans IE8
<link href="{{ STATIC_URL }}bootstrap/css/bootstrap.css" rel="stylesheet">
La page semble correcte en chrome. Mais quand je change à IE8, le CSS est foiré. Le "conteneur" n'est plus centré et la barre de navigation ne semble pas correcte.
Alors j'ai essayé de se débarrasser de django. Je me suis déplacé le bootstrap.css dans le dossier de base.html et changé le chargement de css:
<link href="bootstrap.css" rel="stylesheet">
Puis-je ouvrir le base.html dans IE directement, et tout semble correct à nouveau. Donc, il semble que dans IE8, le rendu du template django soit en désordre avec le css du bootstrap. Une idée? Merci.
====== copié BOF IE8 "view-source" =========
avec un rendu de modèle de 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>
sans modèle de django rendu:
=============================== Je viens de trouver que si je mets le code suivant dans "base.html" et l'étendre dans "main.html", IE8 ne fonctionne pas bien. Mais si je les déplace vers "main.html", et n'utilise pas django "extend", c'est OK.
<!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>
Pouvez-vous publier le code "view-source" dans IE pour les deux cas? – locoboy
code "view-source" affiché. – WHY
Il ne devrait pas y avoir de conflit, vous supposez que c'est quelque chose avec le rendu n'a pas de sens. Il n'y a aucun problème entre étendre et IE8 (je dis cela par expérience). Vous n'avez probablement pas configuré vos fichiers statiques correctement. Pouvez-vous partager settings.py et d'autres choses liées? En outre, montrez-nous votre HTML étendu (peut-être que vous avez abusé d'étendre correctement?). Vous avez besoin de blocs de contenu, il ne suffit pas d'étendre – yuvi