我正在使用内置extends标签的Django模板,我没有在其中放入太多代码,只是一个导航栏,但我在浏览器顶部获得了额外的空间,并且无法在chrome开发人员工具中进行跟踪.这个额外的空间仍然存在,即使我这样做了:
# base.html
<!doctype html>
<html>
<head>
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static "css/layout.css" %}" />
</head><body>
<div><p>something here.</p>
</div>
</body>
</html>
然后我只用一行代码扩展它:
# home.html
{% extends "base.html" %}
然后渲染文件仍然有这个问题.我正在使用Django3.3 Python 3.3和Django1.6.
真奇怪.
最后我发现问题是由编码中的UTF-8 BOM造成的.
我在Windows7上使用Django1.6,Python3.3.我的文本编辑器是Notepad ++,我曾经用UTF-8编码保存文件.默认情况下,UTF-8以字节顺序标记(BOM)保存.正是这种影响的模板渲染,至少的标签extends和include.让我们说,我把它放在一个例子中:
# home.html
{% extends "base.html" %}
{% block content%}
{% include "a.html" %}
{% include "b.html" %}
{% endblock %}
和
# base.html
<!doctype html>
<html>
<head>
<!-- This file saved with encoding UTF-8, which is by default with BOM.-->
</head>
<body>
<div><p>something here, base.</p></div>
{% block content%}{% endblock %}
</body>
</html>
和
# a.html
<p>a.html, saved in utf-8 without BOM. </p>
和
# b.html
<p>b.html, saved in utf-8, which is by default with BOM in Notepad++.</p>
什么是输出？它看起来像这样
___________ ( top of your browser )
( extra space on top, due to extended file `base.html` is with BOM )
something here, base.
a.html, saved in utf-8 without BOM. (no extra space above the content of a.html)
( extra space on top, due to included file `b.html` is with BOM )
b.html, saved in utf-8, which is by default with BOM in Notepad++.
所以,基本上,对于模板加载的任何文件,如果它是BOM,那么渲染的html将在其部分顶部添加额外的空格.因此,请记住使用UTF-8保存所有文件而不使用BOM.
注:我曾尝试更早使用{%spaceless%} {%endspaceless%}我base.html还是home.html,但是这不能解决问题,多余的空格不是由于HTML标签之间的空格或\n.
| 归档时间： |
|
| 查看次数： |
1679 次 |
| 最近记录： |