Internet Explorer box model - what is offset?

Question

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 i

Answer 1

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;
}

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:

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.

Hope this helps.

Answer 2

You can try to use: position: -ms-device-fixed; this trick helps me.

Answer 3

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 rem Poly-fill that was creating problem for me. I was using meta(http-equiv="x-ua-compatible" content="IE=Edge,chrome=1") too.

After removing rem-polyfil JS file, it started working correctly for me.

Answer 4

This seems weird, but you can try setting vertical-align: top in the CSS for the inputs. That fixes it in IE8, at least.