Html 打印预览与我在浏览器中看到的不同

更新：

已将渲染添加到演示中。
这引入了另一个问题：打印预览视觉模糊

---

我有一个简单的页面用于打印EAN-13型视觉条码。见演示

所有黑白条只不过是应用了一些样式的

元素

在浏览器窗口中可以看到：

在打印预览中可以看到：

如你所见

• 第二个黑条有失真
• 最后两条应该是相同的，但它们的宽度不同

---

我需要做什么才能在浏览器窗口中看到准确的视觉效果

---

（注意：我使用的是Chrome 48.0.2564.97 m）

打印视图也有CSS，可能错误与此有关。打印预览在屏幕上显示时必须将结果舍入到屏幕像素，因此可能会出现一些异常，例如最后两行的宽度不一致。但这并不能解释第二行。嗯，这是个愚蠢的问题，但当你真的打印到纸上时，问题还在吗？@Lister先生：这很有趣。如果我打印成PDF，问题仍然存在。如果我打印到纸上，问题似乎就消失了。奖励：若我放大到打印的PDF，问题也会消失！