Chrome 错误地将像素渲染为分数[关闭]答案

【问题标题】：Chrome incorrectly rendering pixels as fractions [closed]Chrome 错误地将像素渲染为分数[关闭]
【发布时间】：2013-12-21 05:41:50
【问题描述】：

编辑：已解决。 “查看

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 开发者工具 > 元素 > 计算和使用带有 jQuery .css 函数的调试器推断出来的。

另外需要注意的一点是，这只发生在它加载到 FTP 上时，而不是本地。在 Firefox 或 Safari 中也不会出现此问题。任何关于 Chrome 到底在做什么的想法或解释，或者解决方案将不胜感激。谢谢！

【问题讨论】：

您在问题中使用的所有代码都是？
我在缩放这样的元素时得到这个确切的值。你确定，你的缩放比例是 100%？
外观是否会根据 Chrome 使用的是全部像素还是部分像素而改变？
感谢 Max K 的领导。实际上，我之前尝试通过将缩放设置为 100% 并重置缩放来解决问题。但是在查看“视图”菜单时，我决定选择“实际大小”选项，这显然确实解决了这个问题。谢谢！
应将问题编辑为更易于理解的问题，而不是包含其答案。无法说出问题的真正含义（例如，您如何推断“边框宽度为“1.8181817531585693px””）。

【解决方案1】：

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

因此，一些数字角落可能被剪掉了，一般网页浏览者通常不会注意到，也就是说，如果页面被设计成不引人注目。

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

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

另外，我建议您重新考虑如何布局您的页面，这样这些小细节就不是问题了。在木工中，熟练的工匠知道如何用模具隐藏粗糙的边缘。

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

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

【讨论】：