CSS left using calc(percent + / - pixel) 奇数结果答案

【问题标题】：CSS left using calc(percent + / - pixel) odd resultCSS left using calc(percent + / - pixel) 奇数结果
【发布时间】：2016-10-21 19:53:02
【问题描述】：

我在具有绝对位置的页面上有一个大小为 33,554,432x33,554,432 像素的巨大 div。它里面有两个具有这些样式的 div：

position: absolute; 
left: calc(64.2571% - 1px); 
top: 100px; 
width: 46px; 
height: 10px;

和

position: absolute; 
left: calc(64.2571% + 1px); 
top: 111px; 
width: 46px; 
height: 10px;

应该放在彼此相差2个像素的位置，但它们的左边位置绝对没有区别。

如果我将左侧属性更改为calc(64.2571% - 2px); 和calc(64.2571% + 2px);，它工作正常。

我试图在这些条件下发布一个小提琴，但在 jsfiddle 它工作正常。我担心这是一个愚蠢的问题，但我检查了所有内容，但无法解决。

我使用的是 Chrome 版本 51.0.2704.103 m。

我刚刚创建了一个类似的fiddle。

【问题讨论】：

我只是想知道为什么你需要那种数字64.2571% ...我猜这可能是浏览器版本问题以及它对 px 值进行四舍五入的方式？
这与 calc 的结果四舍五入有关。 calc 的结果是 21561104.9247。这主要基于浏览器进行四舍五入，并且在 chrome 中存在一个错误。 stackoverflow.com/questions/25662159/chrome-37-calc-rounding
对不起。 3300万像素乘3300万？什么。
@SiddharthGupta 这个问题是 Chrome 37 的错误，我在我的 Chrome 51 中看不到那个错误。我认为不一样。
@DaniP 它们之间有 2 个像素的差异，四舍五入可能只会将其减少到 1 个像素，而不是零。

标签： html css google-chrome

【解决方案1】：

我认为这与 Chrome 处理超大尺寸的方式有关，或者可能与其他浏览器处理它们的方式有关。

即使您指定希望包装元素的宽度为 33554432 像素（超过 3300 万像素！！），Firefox 也只创建了 17895700 像素（几乎一半）的空间。当您打开开发工具时，这在您的小提琴（slightly edited version，添加的控制台日志）中可见。经过一番挖掘，I found out 基于 Gecko 的浏览器确实设置了这些限制。其他浏览器肯定也有它们（我想是为了防止内存问题），但对于 Geckos，它是 17,895,700 像素。

更准确地说，正如this website 所说：

基于 Gecko 的浏览器（如 Firefox）在以下情况下会表现出有趣的行为试图使站点高于 18.939583 公里， “收缩”或“折叠”它的主容器。

如果您将该值转换为cm（一个有效的网络单元），并将项目设置为此宽度（18939583cm），您会发现这确实与我之前显示的像素宽度一致。

关键是，即使您的代码理论上应该可以在 Chrome 上运行，但它却不能（可能是因为数字运算/四舍五入出现问题）。太糟糕了。好处是，尽管它也不能在 Firefox 上运行——至少不能完全运行，因为它会缩小页面。因此，最好找到另一种方法来实现您正在做的事情——而不是创建一个超过 3300 万像素宽的画布。

想到的是 ajax 加载内容，并且只显示必要的部分（例如每个方向 1000px 溢出）。这也将确保良好的加载时间，尽管可能更难进行 SEO 优化和实施。

编辑：起初我没有注意到，但从给定的小提琴中也可以清楚地看出 Chrome 对大小设置了限制！它设置为 33,554,428 像素，几乎是您想要的大小。

【讨论】：