如何使用 CSS 消除元素的偏移量？

小开

Quick fix:

position: relative;
top: -12px;
left: -2px;

this should balance out those offsets, but maybe you should take a look at your whole layout and see how that box interacts with other boxes.

As for terminology, left, right, top and bottom are CSS offset properties. They are used for positioning elements at a specific location (when used with absolute or fixed positioning), or to move them relative to their default location (when used with relative positioning). Margins on the other hand specify gaps between boxes and they sometimes collapse, so they can't be reliably used as offsets.

But note that in your case that offset may not be computed (solely) from CSS offsets.

小开

最佳答案

That offset is basically the x,y position that the browser has calculated for the element based on it's position css attribute. So if you put a <br> before it or any other element, it would change the offset. For example, you could set it to 0 by:

#inputBox{position:absolute;top:0px;left:0px;}

or

#inputBox{position:relative;top:-12px;left:-2px;}

Therefore, whatever positioning issue you have, is not necessarily an issue with offset, though you could always fix it by playing with the top,left,right and bottom attributes.

Is your problem browser incompatibility?

小开

You can apply a reset css to get rid of those 'defaults'. Here is an example of a reset css http://meyerweb.com/eric/tools/css/reset/ . Just apply the reset styles BEFORE your own styles.

小开

Setting the top and left properties to negative values might not be a good workaround if your problem is simply that you're in quirks mode. This can happen if the page is missing a <!DOCTYPE> declaration, causing it to be rendered in quirks mode in IE8. In IE8 Developer Tools, make sure that "Quirks Mode" is not selected under "Document Mode". If it is selected, you may need to add the appropriate <!DOCTYPE> declaration.

小开

I had the same problem. The offset appeared after UpdatePanel refresh. The solution was to add an empty tag before the UpdatePanel like this:

<div></div>

...

小开

For me, it was vertical-align: baseline vs vertical-align: top that was causing the top offset.

Try to set vertical-align: top

小开

I had the same issue on our .NET based website, running on DotNetNuke (DNN) and what solved it for me was basically a simple margin reset of the form tag. .NET based websites are often wrapped in a form and without resetting the margin you can see the strange offset appearing sometimes, mostly when there are some scripts included.

So if you are trying to fix this issue on your site, try enter this into your CSS file:

form {
margin: 0;
}

小开

Just set the outline to none like this

[Identifier] { outline:none; }

小开

define margin and padding for the element is facing the problem:

#element_id {margin: 0; padding: 0}

and see if problem exists. IE renders the page with to more unwanted inheritance. you should stop it from doing so.

小开

If you're using the IE developer tools, make sure you haven't accidentally left them at an older setting. I was making myself crazy with this same issue until I saw that it was set to Internet Explorer 7 Standards. Changed it to Internet Explorer 9 Standards and everything snapped right into place.

小开

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

小开

moving element top: -12px or positioning it absolutely doesn't solve the problem but only masks it

I had the same problem - check if you have in one wrapping element mixed: floating elements with non-floating ones - my non-floating element caused this strange offset to the floating one

小开

In my case the offset was added to a custom element with grid layout within an li while the ul was a vertical flexbox.

The pretty simple solution was to set the define the li as block element with

li {
display: block;
}

And the offset was gone