Html CSS左使用calc（百分比+；/-像素）奇数结果

我有一个巨大的div，大小为33554432x3354432 px，在一个带有绝对位置的页面上。其中有两个具有以下样式的div：

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

及

应该放置两个彼此不同的像素，但它们的左侧位置绝对没有区别

如果我将左侧属性更改为

calc（64.2571%-2px）和
计算（64.2571%+2px），工作正常

我试图发布一个关于这些条件的文章，但在JSFIDLE上效果很好。我担心这是一个愚蠢的问题，但我检查了所有的东西，无法解决它

我使用的是Chrome 51.0.2704.103 m版


我刚刚做了一个类似的尝试。
我相信这与Chrome处理超大尺寸的方式有关，或者可能与其他浏览器处理超大尺寸的方式有关

即使您指定希望wrapper元素的宽度为33554432px（超过3300万像素！！），Firefox也只创建了17895700像素（几乎一半）的空间。当您打开开发工具时，这在您的fiddle（，添加的控制台日志）中可见。经过一些挖掘，基于Gecko的浏览器确实设置了这些限制。其他浏览器肯定也有它们（我想是为了防止内存问题），但对于壁虎来说，它的像素是17895700

更准确地说，正如它所说：

基于Gecko的浏览器，比如Firefox，在
试图使现场高于18.939583公里，
“收缩”或“塌陷”其主容器

如果您将该值转换为
cm
（一个有效的web单元），并将该项设置为该宽度（
18939583cm
），您将看到它确实与我之前显示的像素宽度一致

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

我想到的是ajax加载内容，并且只显示必要的部分（例如，每个方向上的1000px溢出）。这将确保一个良好的加载时间以及，虽然它可能更难优化和实施搜索引擎优化

编辑：一开始我没有注意到，但从给定的提琴来看，Chrome对尺寸也有限制！它设置为33554428像素，这几乎是您想要的大小。
我只是想知道您为什么需要这种数字
64.2571%
。。。我猜这可能是浏览器版本的问题，以及它对px值进行四舍五入的方式？这与计算结果的四舍五入有关。计算结果将是21561104.9247。这主要是基于浏览器的，chrome中有一个bug。我很抱歉。3300万像素乘3300万像素？什么。@SiddharthGupta那个问题是Chrome37的bug，我在Chrome51中没有看到这个bug。我不认为这是一样的。@DaniP它们之间有2个像素的差异，四舍五入可能只会将其减少到1个像素，而不是零。
position: absolute; 
left: calc(64.2571% + 1px); 
top: 111px; 
width: 46px; 
height: 10px;