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

我在某些元素上遇到了定位问题，在对其进行检查后，IE8 Developer工具向我显示了这一点：

现在，我很确定我的问题是12偏移量，但是如何删除它？我找不到任何提及CSS偏移属性的内容。除了保证金，我们还需要抵消吗？

这是产生该代码的代码：

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

具有偏移量的元素是 inputBox

该偏移量基本上是浏览器根据其位置css属性为该元素计算的x，y位置。因此，如果将a放在<br>它或任何其他元素的前面，它将改变偏移量。例如，您可以通过以下方式将其设置为0：

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

要么

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

因此，尽管您始终可以通过使用top，left，right和bottom属性进行修复，但无论您遇到什么定位问题，都不一定是偏移问题。

您的浏览器不兼容吗？

对我来说，是vertical-align: baselinevs vertical-align: top造成了最高的抵消。

尝试设定 vertical-align: top

快速解决：

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

这样可以平衡这些偏移量，但是也许您应该查看一下整个布局，看看该框如何与其他框交互。

至于术语，left，right，top和bottom是CSS 偏移特性。它们用于将元素定位在特定位置（用于absolute或fixed定位时），或相对于其默认位置移动元素（用于relative定位时）。另一方面，边距指定了框之间的间隙，它们有时会塌陷，因此不能可靠地用作偏移量。

但要注意，你的情况偏移可能不（仅仅）从CSS偏移计算。

如果您的问题只是您处于怪癖模式，则将top和left属性设置为负值可能不是一个好的解决方法。如果页面缺少<!DOCTYPE>声明，导致该页面在IE8中以怪癖模式呈现，则会发生这种情况。在IE8开发人员工具中，确保未在“文档模式”下选择“ Quirks模式”。如果选择它，则可能需要添加适当的<!DOCTYPE>声明。

如果您使用的是IE开发人员工具，请确保您没有将它们留在较旧的设置中。直到看到它设置为Internet Explorer 7 Standard，我才对这个问题发疯。将其更改为Internet Explorer 9标准，所有内容都立即安装到位。

移动元素顶部：-12px或将其定位绝对不能解决问题，而只能掩盖它

我遇到了同样的问题-检查您是否在一个包装元素中混合使用：浮动元素与非浮动元素-我的非浮动元素导致了这种奇怪的偏移到浮动元素

为元素定义边距和填充正面临问题：

#element_id {margin: 0; padding: 0}  

看看是否存在问题。IE呈现了更多不必要的继承页面。您应该停止这样做。

这似乎很奇怪，但是您可以尝试vertical-align: top在CSS输入中设置。至少在IE8中可以解决此问题。

在基于DotNetNuke（DNN）的基于.NET的网站上，我遇到了同样的问题，而为我解决的问题基本上是表单标签的简单边距重置。基于.NET的网站通常以某种形式包装，并且无需重置边距，您有时会看到奇怪的偏移量出现，主要是在包含一些脚本的情况下。

因此，如果您要在网站上解决此问题，请尝试在CSS文件中输入以下内容：

form {
  margin: 0;
}

您可以应用一个重置CSS来摆脱那些“默认值”。这是重置CSS的示例http://meyerweb.com/eric/tools/css/reset/。只需在您自己的样式之前应用重置样式即可。

我有同样的问题。偏移在UpdatePanel刷新后出现。解决方案是在UpdatePanel之前添加一个空标签，如下所示：

<div></div>

...

只需将轮廓设置为没有这样的轮廓

[标识符] {轮廓：无；}

在我的情况下，将偏移量添加到li中具有网格布局的自定义元素中，而ul是垂直flexbox。

相当简单的解决方案是使用以下命令将li定义为block元素：

li {
 display: block;
}

抵消了