Html 如何使用 CSS 去除元素的偏移量？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4817745/
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
How do I get rid of an element's offset using CSS?
提问by m.edmondson
I've got a positioning problem with some elements, upon inspecting it IE8 Developer tools it shows me this:
我有一些元素的定位问题，在检查它时 IE8 开发人员工具它向我展示了这一点：
Now I'm pretty sure my problem is that 12 offset, but how do I remove it? I can't find any mention of a CSS offset property. Do we need an Offset in addition to margin?
现在我很确定我的问题是 12 个偏移量，但我如何删除它？我找不到任何提及 CSS offset 属性的内容。除了保证金之外，我们还需要偏移量吗？
Here is the code thats producing this:
这是产生这个的代码：
<div id="wahoo" style="border: solid 1px black; height:100px;">
<asp:TextBox ID="inputBox" runat="server" />
<input id="btnDropDown" type="button" style="width:26px; height:26px; background-position: center center; border-left-color: buttonface; background-image: url(Images/WebResource.gif); border-bottom-color: buttonface; border-top-color: buttonface; background-repeat: no-repeat; border-right-color: buttonface;" tabindex="99" />
<div id="ListboxWrapper" style="display:none; position:absolute; onfocusout="this.style.display = 'none'"">
<asp:ListBox ID="lstBoxCompany" runat="server" AutoPostBack="True" OnSelectedIndexChanged="lstBoxCompany_SelectedIndexChanged" style="z-index: 100;" Width="300px" />
</div>
</div>
The element with the offset is inputBox
具有偏移量的元素是 inputBox
采纳答案by Neo
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:
该偏移量基本上是浏览器根据元素的位置 css 属性为该元素计算的 x,y 位置。因此，如果您<br>在它或任何其他元素之前放置 a ，它将更改偏移量。例如，您可以通过以下方式将其设置为 0：
#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.
因此，无论您遇到什么定位问题，都不一定是偏移量的问题，尽管您始终可以通过使用 top、left、right 和 bottom 属性来解决它。
Is your problem browser incompatibility?
您的问题是浏览器不兼容吗？
回答by Richard
For me, it was vertical-align: baselinevs vertical-align: topthat was causing the top offset.
对我来说，是vertical-align: baselinevsvertical-align: top导致顶部偏移。
Try to set vertical-align: top
尝试设置 vertical-align: top
回答by Alin Purcaru
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, topand bottomare CSS offsetproperties. They are used for positioning elements at a specific location (when used with absoluteor fixedpositioning), or to move them relative to their default location (when used with relativepositioning). Margins on the other hand specify gaps between boxes and they sometimes collapse, so they can't be reliably used as offsets.
至于术语，left，right，top和bottom是CSS偏移特性。它们用于将元素定位在特定位置（与absolute或fixed定位一起使用时），或相对于它们的默认位置移动它们（与relative定位一起使用时）。另一方面，边距指定框之间的间隙，它们有时会折叠，因此它们不能可靠地用作偏移量。
But note that in your case that offsetmay not be computed (solely) from CSS offsets.
但要注意，你的情况偏移可能不（仅仅）从CSS偏移计算。
回答by regularmike
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.
如果您的问题只是处于怪癖模式，则将 top 和 left 属性设置为负值可能不是一个好的解决方法。如果页面缺少<!DOCTYPE>声明，导致它在 IE8 中以 quirks 模式呈现，则会发生这种情况。在 IE8 开发者工具中，确保没有选择“文档模式”下的“怪癖模式”。如果选中它，您可能需要添加适当的<!DOCTYPE>声明。
回答by Tom McGee
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.
如果您使用的是 IE 开发人员工具，请确保您没有不小心将它们保留在较旧的设置中。在我看到它被设置为 Internet Explorer 7 标准之前，我对同样的问题感到很疯狂。将其更改为 Internet Explorer 9 标准，一切都恰到好处。
回答by Picard
moving element top: -12px or positioning it absolutely doesn't solve the problem but only masks it
移动元素顶部：-12px 或定位它绝对不能解决问题，但只能掩盖它
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
我遇到了同样的问题 - 检查你是否在一个包装元素中混合了：浮动元素与非浮动元素 - 我的非浮动元素导致了对浮动元素的这种奇怪的偏移
回答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 Pmpr
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.
并查看是否存在问题。IE 将页面呈现为更多不需要的继承。你应该阻止它这样做。
回答by Vlastique
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.
我在我们基于 .NET 的网站上遇到了同样的问题，在 DotNetNuke (DNN) 上运行，为我解决的基本上是表单标签的简单边距重置。基于 .NET 的网站通常包含在一个表单中，如果不重置边距，您有时会看到奇怪的偏移量出现，主要是在包含一些脚本时。
So if you are trying to fix this issue on your site, try enter this into your CSS file:
因此，如果您尝试在您的网站上解决此问题，请尝试将其输入到您的 CSS 文件中：
form {
margin: 0;
}
回答by Daniel Barde
Just set the outline to none like this
只需像这样将轮廓设置为无
[Identifier] { outline:none; }
[标识符] { 大纲：无；}
