javascript - 为什么 Internet Explorer 在某些情况下会自动调整 div 的 style.left 值？

Question

我正在使用 javascript 调整 div 的样式:

div.style.left = "486px";

我输出值:

console.log("left after:" + div.style.left);

输出:

日志:左后:486px

看起来不错。但我看到 div 不存在。我使用开发人员工具检查内联样式:

left: 852px

这并不总是发生。左值的某些更改可以正常工作。但是在其他一些之后会进行一些“额外”的调整。

它只发生在 Internet Explorer 中(使用版本 8 测试)。在 Firefox、Chrome、Opera 和 Safari 中测试，这不会发生。有什么想法吗？

我正在做这个调整作为对使用 $(window).resize 函数的浏览器缩放的 react 。我在最后输出“left after:”。我假设浏览器已经完成了所有缩放和重新定位的操作。我设置我的值，我在最后输出它，然后期望在 CSS 中看到这个值。大多数情况下都会发生这种情况，但有时(放大)我会得到这些不同的值。

编辑:仅当浏览器缩放设置为 150% 或 175% 时才会发生。例如，在 150% 时，我将左值设置为 567px。但是在 CSS 中，我得到 851px 当返回到 125% 或更少的缩放级别时，它再次起作用。从 200% 开始它也可以工作(设置 425px)。

Answer 1

Absolute Positioning

An element whose position property has the value absolute is said to be absolutely positioned, and is completely removed from the document flow: it doesn’t affect subsequent elements at all. It’s positioned with respect to its containing block, and it establishes a new containing block for normal flow children, and for descendants whose position property is set to absolute.

Containing Block

If the value of the position property is absolute, the containing block is the nearest positioned ancestor—in other words, the nearest ancestor whose position property has one of the values absolute, fixed, or relative. The containing block is formed by the padding edge of that ancestor.

元素自然具有static的位置，因此默认情况下不会使其成为包含 block 。证明，check this demo .尝试将 position:relative 添加到 body，这应该使它成为一个包含 block 。