我在一个绝对位置的页面上有一个大小为33,554,432x33,554,432 px的巨大div。里面有两个div用这些样式：
position: absolute;
left: calc(64.2571% + 1px);
top: 111px;
width: 46px;
height: 10px;
和
calc(64.2571% - 2px);应该放置2个不同的像素，但它们的左侧位置绝对没有区别。
如果我将左侧属性更改为calc(64.2571% + 2px);和These.Final.Hours-AUSVERSION.2013-TEST-TESTAGAIN-YIFY.cp(tt123456).MiLLENiUM.mp4，则表明它已正常工作。
我试图发布这些条件的小提琴，但在jsfiddle它工作正常。我担心这是一个愚蠢的问题，但我检查了一切，无法解决。
我使用的是Chrome版本51.0.2704.103 m。
我刚刚设法制作了类似的fiddle。
答案 0 :(得分：1)
我认为这与Chrome处理超大尺寸的方式或其他浏览器处理它们的方式有关。
即使你指定你想要包装元素为33554432px宽（超过3300万像素!!），Firefox只会创建一个17895700像素的空间（几乎一半）。当您打开开发工具时，这在您的小提琴（slightly edited version，添加的控制台日志）中可见。经过一些挖掘，I found out基于Gecko的浏览器确实存在这些限制。其他浏览器肯定也有它们（为了防止我认为的内存问题），但是对于Geckos来说，它是17,895,700像素。
更准确地说，正如this website所说：
像Firefox这样的基于Gecko的浏览器显示出一种有趣的行为 试图使该网站任何高于18.939583公里， “收缩”或“坍塌”其主要容器。
如果您将该值转换为cm（有效的网络单元），并将项目设置为此宽度（18939583cm），您会发现这确实与宽度（以像素为单位）一致我以前说过。
关键在于，即使您的代码理论上应该在Chrome上运行，但它也没有（可能是因为数字运算/舍入出现问题）。太糟糕了。好处是，虽然它在Firefox上也不起作用 - 至少不完整，因为它缩小了页面。因此，最好找到另一种方法来实现你正在做的事情 - 而不是创建一个超过3300万像素宽的画布。
我们想到的是内容的ajax加载，并且仅显示必要的部分（例如，每个方向上溢出1000px）。这将确保良好的加载时间，尽管SEO优化和实施可能更难。
编辑：我一开始并没有注意到，但是从给定的小提琴中可以清楚地看出Chrome对尺寸有限制！它设置为33,554,428像素，几乎你想要的大小。