css left 属性允许的最大负值是多少？

Question

我有一个场景，我更新左值以显示 div 元素的某些部分。在我的例子中， div 元素的宽度很长。我使用 left 属性通过动画来回移动 div。

示例代码：

$('.slides .next').live('click', function(){
  var pos = $(this).position();
  var newLeft = (pos.left - 700);
  $(this).animate({left: "-=left"}, 800);
  // I also tried this instead of the above=> $(this).animate({left: newLeft}, 800);
});

在某些时候，左值会随着负值而变大（例如：-8400px）。超过这个值，左边自动变为0px；

非常感谢任何帮助。 谢谢

Answer 1

来自MDN：

没有有效值的官方范围。歌剧支持 值高达 2^15-1，IE 高达 2^20-1，其他浏览器甚至更高。 在 CSS3 价值观周期中，有很多关于 设定支持的最低限度：最新决定，2012 年 4 月 在 LC 阶段，为 [-2^27-1; 2^27-1] # 但其他值如 2^24-1 和 2^30-1 也被提出了##。最新的编辑草稿没有 不再列出限制。

Answer 2

CSS 理论上支持所有值类型的无限精度和无限范围；然而，实际上实现的容量是有限的。 UA 应该支持合理有用的范围和精度。

规范中的文本可见于：

http://www.w3.org/TR/css3-values/#lengths

部分：4 种数值数据类型

Answer 3

我对这个有一点乐趣。其他答案表明没有理论上的限制。

This answer 在 Chrome 中给出了33554428px 的宽度和高度限制。在此示例中，我独立得出了相同的值 -1px，这表明 Chrome 中 33554427px 存在实际限制。

现实地 - 我建议，如果这么大的上限限制了您要达到的目标，那么您需要重新考虑实现它的方法！

示例

在下面的示例中，任何高于 -33554427px 的左值 1px 或更多都会给出相同的结果。左边的小红线是 div。

* {
  margin: 0;
  padding: 0;
}
div {
  width: 33554427px; /* any pixel sizes above this make no change */
  height: 1000px;
  height: 100vh;
  background: #F00;
  left: -33554426px; /* Change to -33554427px to hide completely */
  position: absolute;
}

<div></div>

Answer 4

我相信您可以使用 CSS 检查器功能在浏览器中对此进行测试。在检查器的属性中输入一个巨大的值。此处以宽度和高度显示：

Width and Height in CSS

Answer 5

我在按钮上测试了这个：

.toggle {
    position: fixed;
    top: 10px;
    left: 10px;
    width: 60px;
    height: 40px;

    strong{
        position: absolute;
        left: -99999999px;
    }
}

当这个强大的推到很远的时候，这个按钮在JS中是不能点击的。您可以将其聚焦在页面上，通过回车激活它，但在 JS 中单击事件不起作用。

但是，当您将左侧从 99999999 更改为 9999999（少一位数）时，这开始起作用了。

Chrome/Opera 中存在此问题，但 Firefox 中不存在。

测试示例：https://jsfiddle.net/6kaphqvz/1/