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

Question

我正在尝试调整一个站点以支持IE 7.但是我有一些元素,它们向右偏移了69px.我在IE9中进行测试,设置为将页面呈现为IE7.当我打开开发人员模式并检查元素时,我注意到"边缘"周围有一个名为"offset"的参数.

我之前从未听说过这一点,谷歌搜索并没有帮助我 - 我只是设法找到一些关于浮动偏移的东西,这是不一样的,但我认为它是在那里消除一些怪癖模式的问题？如何消除此偏移参数？

显然我已经设置了IE-7特定样式表,您可以通过此链接访问我的测试环境来自行测试问题:

http://suitable.amok-adhoc.com/2012/

解决了:

找到了解决方案 - 非常简单.只需要明确地声明这样的位置(尽管它是从所有其他浏览器中的父元素继承的,IE添加了一个边距并称之为"offset",这样做会被覆盖):

p {
    left:0px;
}

Answer 1

该偏移量是指元件被从其原始位置移动的距离.当使用,和/或值定位元素的相对或绝对时left,可以看到这种情况.以下面的代码为例:topbottomright

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

如果我们在Internet Explorer 10中检查此元素,我们会看到您提到的偏移量.该em值已转换为像素,但效果仍清晰可见.请注意,我们在Chrome开发者工具(也在Opera中)中看到了类似的内容,只是将其标记为"位置":

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

最后,这只是一个语义问题.无论我们称之为"抵消"还是"定位",它仍然是一回事; 这是它与屏幕上原始位置的距离.

希望这可以帮助.

Answer 2

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