Question

我有一个场景，我更新左值以显示div元素的某些部分。在我的例子中，div元素的宽度非常长。我使用左边的属性来动画来回移动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：

没有正式的有效值范围。 Opera支持值最高为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

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

Width and Height in CSS

Answer 4

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

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 5

我在按钮上对此进行了测试：

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

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

当此功能被推远时，在JS中无法单击此按钮。您可以将其放在页面上，然后按Enter激活它，但是在JS中，单击事件不起作用。

但是当您从99999999更改为9999999（少一位数字）时，此功能开始起作用。

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

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

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

5 个答案:

实施例