例如,我有这个:
<pre>
sun<br/>
mercury <br/>
venus <br/>
earth <br/>
mars <br/>
jupiter <br/>
saturn <br/>
</pre>Run Code Online (Sandbox Code Playgroud)
和这个:
<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>Run Code Online (Sandbox Code Playgroud)
我希望第二个看起来像第一个。
我相信这些外观相同,但是我唯一的证明是使用了旧的“在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的答案可能很长。