CSS位置的最大值 [英] Maximum value for CSS position

问题描述

我很好奇您可以为诸如绝对定位之类的东西输入的最大值，并且它仍然可以被浏览器完全接受（例如，现代的，所以是IE8 +）：

I'm just curious as to what the maximum value you can enter for something like absolute positioning and for it to still be fully honoured by the browser (let's say modern-ish, so IE8+):

.foo {
  left: 9999px;
}

搜索后，我偶然发现此答案（实际上）对您可以拥有的内容没有限制z-index值，但是我认为这两个属性的工作方式不同。

After having a search around I stumbled across this answer which say's there is (virtually) no limit to what you can have as a z-index value, however I would think that these two properties work differently.

此外，这会对性能产生什么影响？

Also, what impact might this have on performance?

推荐答案

根据下面的测试，所有Firefox，Chrome和IE8都存在相同的问题，但是值不同。

According to the test below, all Firefox, Chrome and IE8 have the same problem, but at different values.

严重的问题多少开始于

• Chrome： 33554430


• Firefox： 17895700


• IE8： 1193050

• Chrome: 33554430
• Firefox: 17895700
• IE8: 1193050

但是，在Firefox和Chrome浏览器上，在此数字之前，某些元素向左或向左移动了一两个像素在右边。我没有在IE8上看到它。

But, on Firefox and Chrome, much before that number, some elements are shifted one or two pixels to the left or to the right. I didn't see that on IE8.

此外，在Chrome上，输入可以在33553900附近停止工作。

Moreover, on Chrome, the inputs can stop working around 33553900.

var num = document.getElementById('num'),
    init = document.getElementById('init'),
    render = document.getElementById('render'),
    result = document.getElementById('result');
render.onclick = function() {
  result.innerHTML = '';
  var from = +init.value,
      to = from + +num.value;
  for(var i=from; i<to; ++i) {
    var wrapper = document.createElement('div');
    wrapper.className = 'wrapper';
    wrapper.style.marginLeft = -i + 'px';
    var first = document.createElement('div');
    first.style.left = i + 'px';
    first.setAttribute('data-num', i);
    var last = document.createElement('div');
    last.style.left = i+10 + 'px';
    last.setAttribute('data-num', i+10);
    wrapper.appendChild(first);
    wrapper.appendChild(last);
    result.appendChild(wrapper);
  }
}

.wrapper {
  margin: 10px 0;
}
.wrapper > div {
  position: relative;
  width: 10px;
  height: 10px;
  background: red;
}
.wrapper > div:after {
  content: attr(data-num);
  font-size: 10px;
  line-height: 10px;
  float: left;
  margin-left: 15px;
}

Render <input type="number" id="num" value="100" /> elements
starting with <input type="number" id="init" value="0" />
<input type="button" id="render" value="Render" />
<div id="result"></div>

这篇关于CSS位置的最大值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！