Internet Explorer 盒子模型 - 什么是偏移量？答案

【问题标题】：Internet Explorer box model - what is offset?Internet Explorer 盒子模型 - 什么是偏移量？
【发布时间】：2012-03-05 02:32:00
【问题描述】：

我正在尝试调整一个站点以支持 IE 7。但是，我有一些元素向右偏移了 69 像素。我在 IE9 中进行测试，设置为像 IE7 一样呈现页面。当我打开开发者模式并检查元素时，我注意到在“margin”周围有一个名为“offset”的参数。

我以前从来没有听说过这个，谷歌搜索对我帮助不大——我只是设法找到了一些关于浮动偏移的东西，这是不一样的，但我认为它是为了消除一些问题怪癖模式？我怎样才能消除这个偏移参数？

显然我设置了一个 IE-7 特定的样式表，您可以通过此链接访问我的测试环境自行测试问题：

已解决：

找到了解决方案 - 非常简单。只需要像这样显式声明位置（尽管它是从所有其他浏览器中的父元素继承的，IE 添加了一个边距并将其称为“偏移量”，这样做会覆盖它）：

p {
    left:0px;
}

【问题讨论】：

【解决方案1】：

偏移量是元素从其原始位置移动的距离。当您使用left、top、bottom 和/或right 值定位相对或绝对元素时，就会出现这种情况。以如下代码为例：

#header {
    top: 3em;
    left: 3em;
    position: relative;
}

如果我们在 Internet Explorer 10 中检查此元素，我们会看到您提到的 偏移量。 em 值已转换为像素，但效果仍然可见。请注意，我们在 Chrome 开发者工具（也在 Opera）中看到了类似的东西，只是它被标记为“位置”：

奇怪的是，Firefox 甚至没有通过他们的插图来传达偏移/位置：

最后，这只是语义问题。无论我们称它为“偏移”还是“位置”，它仍然是一回事；它是与屏幕上原始位置的距离。

希望这会有所帮助。

【讨论】：

CSS2.1 也非正式地称它们为偏移量：w3.org/TR/CSS21/visuren.html#position-props
很好的发现，@BoltClock。我对 offset 的使用并不感到震惊；即使在与布局相关的 DOM 属性中，它也是一个相当常见的术语。令我震惊的是 Firefox，尽管它很棒，却没有提及它们。
我没有设置元素的位置，也没有设置自身和父级的边距，我也关闭了计算选项卡上的所有样式，但偏移量仍然在这里，并且元素被移动到 10px（在 chrome 中它不是移位，并在左侧设置位置：-10px 移位元素也在 chrome 中）

【解决方案2】：

这看起来很奇怪，但您可以尝试在CSS 中设置vertical-align: top 作为输入。至少在 IE8 中修复了它。

【讨论】：

【解决方案3】：

我遇到了类似的问题，我的标题菜单宽度显示不正确（显示为缩小的宽度），经过一些调试后，我意识到我添加了 rem Poly-fill，这给我带来了问题。我也在使用meta(http-equiv="x-ua-compatible" content="IE=Edge,chrome=1")。

删除rem-polyfil JS 文件后，它开始对我正常工作。

【讨论】：

【解决方案4】：

您可以尝试使用： position: -ms-device-fixed; 这个技巧对我有帮助。

【讨论】：