CSS Internet Explorer 盒子模型 - 什么是偏移量？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9264767/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Internet Explorer box model - what is offset?
提问by funkylaundry
I am trying to adapt a site to support IE 7. I have a few elements, however, which are being offset to the right by 69px. I am testing in IE9, set to render the page as if it were IE7. When I turn on developer mode and inspect the element I notice that surrounding the "margin" there is a parameter called "offset".
我正在尝试调整网站以支持 IE 7。但是，我有一些元素向右偏移 69 像素。我正在 IE9 中进行测试，设置为像 IE7 一样呈现页面。当我打开开发人员模式并检查元素时，我注意到在“边距”周围有一个名为“偏移量”的参数。
I've never heard of this before and Googling has not helped me out much - I only managed to find something about float-offset, which was not the same, but I assume it was there to eliminate some of the issues of quirks mode? How can I eliminate this offset-parameter?
我以前从未听说过这个，谷歌搜索也没有帮到我太多——我只找到了一些关于浮动偏移的东西，这不一样，但我认为它是为了消除一些怪癖模式的问题？我怎样才能消除这个偏移参数？
Obviously I have a IE-7 specific stylesheet set up and you can test the problem yourself by going to my testing environment on this link:
显然，我设置了一个 IE-7 特定的样式表，您可以通过以下链接转到我的测试环境来自己测试问题：
http://suitable.amok-adhoc.com/2012/
http://suitable.amok-adhoc.com/2012/
Solved:
解决了：
Found a solution - it was pretty simple. Just had to explicitly declare the position like this (although it was inherited from the parent element in all other browsers IE added a margin and called it "offset", which is overridden by doing this):
找到了一个解决方案 - 这很简单。只需要像这样显式声明位置（尽管它是从所有其他浏览器中的父元素继承的，但 IE 添加了一个边距并将其称为“偏移量”，这样做会覆盖它）：
p {
left:0px;
}
采纳答案by Sampson
The offsetis the distance at which the element was moved from its original location. This is seen when you positionan element either relative or absolute with left, top, bottomand/or rightvalues. Take the following code as an example:
该偏移量是指元件被从其原始位置移动的距离。这被认为是，当你定位相对或绝对与元素left，top，bottom和/或right值。以下面的代码为例：
#header {
top: 3em;
left: 3em;
position: relative;
}
If we inspect this element in Internet Explorer 10, we see the offsetyou were mentioning. The emvalues have been converted to pixels, but the effect is still visible. Note that we see something similar in the Chrome Developer Tools (also in Opera), only it's labeled as "position" instead:
如果我们在 Internet Explorer 10 中检查此元素，我们会看到您提到的偏移量。这些em值已转换为像素，但效果仍然可见。请注意，我们在 Chrome 开发人员工具（也在 Opera 中）中看到了类似的内容，只是将其标记为“位置”：
Oddly enough, Firefox doesn't even appear to communicate the offset/position via their illustration:
奇怪的是，Firefox 甚至似乎没有通过他们的插图来传达偏移/位置：
In the end this is an issue of mere semantics. Whether we call it "offset" or "position," it's still the same thing; it's the distance from its original location on the screen.
归根结底，这只是一个语义问题。无论我们称它为“偏移”还是“位置”，它仍然是一回事；它是它在屏幕上的原始位置的距离。
Hope this helps.
希望这可以帮助。
回答by BrainCoder
This seems weird, but you can try setting vertical-align: topin the CSSfor the inputs. That fixes it in IE8, at least.
这看起来很奇怪，但您可以尝试vertical-align: top在CSS输入中设置。这至少在 IE8 中修复了它。
回答by Muhammad Hannan
I had similar issue, my header menu width was not appearing correctly (was appearing in shrunk width), after some debugging I realized that I have added remPoly-fill that was creating problem for me. I was using meta(http-equiv="x-ua-compatible" content="IE=Edge,chrome=1")too.
我有类似的问题，我的标题菜单宽度没有正确显示（以缩小的宽度出现），经过一些调试后，我意识到我添加了rem对我造成问题的 Poly-fill。我也在用meta(http-equiv="x-ua-compatible" content="IE=Edge,chrome=1")。
After removing rem-polyfilJS file, it started working correctly for me.
删除rem-polyfilJS 文件后，它开始为我正常工作。
回答by mac.slusarek
You can try to use:
position: -ms-device-fixed;this trick helps me.
你可以尝试使用：
position: -ms-device-fixed;这个技巧对我有帮助。
