css - Chrome 错误地将像素渲染为分数

Question

编辑:已解决。 “ View < 实际大小”解决了该问题，而不是将缩放重置为 100%。

我在 Chrome 将 div 渲染为分数而不完全按照指定数字时遇到问题。

例如:

HTML

<div class='tile'>foo</div>

CSS

.tile {
  background-color: #CCCCCC;
  border-width: 2px;
  border-style: outset;
  display: table;
  float: left;
}

边框宽度不是渲染为 2px，而是“1.8181817531585693px”，是从 Chrome 开发人员工具 > 元素 > 计算并使用带有 jQ​​uery .css 函数的调试器推断出来的。

需要注意的一些额外事项是，只有在 FTP 上加载时才会发生这种情况，而不是在本地加载。在 Firefox 或 Safari 中也不会出现此问题。任何有关 Chrome 到底在做什么或解决方案的想法或解释将不胜感激。谢谢!

Answer 1

简短的回答是，他们正在处理内部二进制的实数，并且事情必须快速完成。

因此，一些数字 Angular 落可能被削减，这些数字通常不会被普通网页查看者注意到，也就是说，如果页面被设计成不引人注目。

想想吧，我知道，你会认为浏览器会更准确，但我发现即使对我的 css 进行了最仔细和详细的控制，在显示时似乎也会出现舍入错误，对小细节造成严重破坏.

首先，我建议您使用em而不是px。我知道你可能必须重新开始你的 CSS，但我发现它更可靠，从屏幕到屏幕。请记住，现代页面不是基于像素的。它们是动态的野兽，可以放大和缩小，也可以缩小，但仍然必须输出合理的东西。

此外，我建议重新考虑如何布局页面，这样这样的小细节就不再是问题。在木工方面，熟练的工匠知道如何用模制件隐藏粗糙的边缘。

我有一个非常准确的网页，用于生成特殊的打印传单。强制 html 和 css 去做他们不想做的事情是一种巨大的痛苦，这是准确的。

此外，我还可以在 5 个主要浏览器上测试我的生产网站，这些浏览器相互重叠，这样当我在它们之间切换(从一种浏览器到另一种浏览器)时，我可以看到很小的差异。它们在各方面都存在一点点偏差，而且确实没有办法使它们准确。