Internet Explorer盒式-偏移量是多少? [英] Internet Explorer box model - what is offset?

问题描述

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

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".

我以前从未听说过此消息，并且Googling并没有为我提供很多帮助-我只是设法找到一些有关float-offset的东西，虽然不尽相同，但我认为可以消除一些关于float-offset的问题.怪癖模式?如何消除此偏移参数?

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?

很明显，我已经设置了IE-7特定的样式表，您可以通过以下链接转到我的测试环境，从而自行测试问题:

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:

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

已解决:

找到了一个解决方案-这非常简单.只需像这样明确声明位置(尽管它是从所有其他浏览器的父元素继承而来的，IE添加了一个边距并将其称为偏移量"，通过执行此操作可以将其覆盖):

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):

p {
    left:0px;
}

推荐答案

偏移量是元素从其原始位置移动的距离.当您 position 相对或绝对具有left，top，bottom和/或right值的元素时，就会看到此情况.以以下代码为例:

The offset is the distance at which the element was moved from its original location. This is seen when you position an element either relative or absolute with left, top, bottom and/or right values. Take the following code as an example:

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

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

If we inspect this element in Internet Explorer 10, we see the offset you were mentioning. The em values 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:

奇怪的是，Firefox甚至没有通过其插图来传达偏移量/位置:

Oddly enough, Firefox doesn't even appear to communicate the offset/position via their illustration:

最后，这只是一个语义问题.无论我们称其为偏移"还是位置"，都是一样.这是距屏幕原始位置的距离.

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.

希望这会有所帮助.

这篇关于Internet Explorer盒式-偏移量是多少?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！