例如，我有这个：
<pre>
sun<br/>
mercury <br/>
venus <br/>
earth <br/>
mars <br/>
jupiter <br/>
saturn <br/>
</pre>和这个：
<div style="font-family:monospace">
<div style="text-indent: 0">sun</div> <br/>
<div style="text-indent: 4ch">mercury</div> <br/>
<div style="text-indent: 4ch">venus</div> <br/>
<div style="text-indent: 8ch">earth</div> <br/>
<div style="text-indent: 8ch">mars</div> <br/>
<div style="text-indent: 12ch">jupiter</div> <br/>
<div style="text-indent: 4ch">saturn</div> <br/>
</div>我希望第二个看起来像第一个。
我相信这些外观相同，但是我唯一的证明是使用了旧的“在Windows真正的快速浏览和眼球跟踪之间来回切换”技术。（天文学家称其为“眨眼比较器”-https: //en.wikipedia.org/wiki/Blink_comparator）。我确保窗户的大小相同，位置相同。但是，如果渲染的HTML无法在屏幕上显示，则可能太困难了。
有没有更确定的工具或方法可以进行此比较？
我在Chrome 77.0.3865.120和Firefox 69.0.3中都看到了这些。
例如，我知道使用最初是Web Standards Project（Web标准项目）的一部分的浏览器Acid测试-https: //www.acidtests.org/-像素完美渲染是基准。
（额外的功劳：第二个代码段的HTML可能足以满足我的需求；如果您愿意提出改进的建议，将是值得欢迎的。）
编辑：我的问题比较了两个小的HTML示例，可以将它们呈现为适合浏览器的可见部分。但总的来说，我想知道HTML的答案可能很长。
我正在从 django 项目的数据库加载文本以在模板中显示它。
在数据库中存储的文本中，我添加了一些 HTML 标签，但浏览器似乎无法解释这些 html 标签。
这是我的模板：
<div>
<!-- body_text = "<strong>Hello</strong> word" -->
{{ entry.body_text }}
</div>
我得到了原始文本：<strong>Hello</strong> word而不是
<strong>Hello</strong> word我做错了什么？