如何使用CSS摆脱元素的偏移量？

Question

我有一些元素的定位问题，在检查IE8开发者工具时它会告诉我这个：

现在我很确定我的问题是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

Answer 1

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

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

或

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

因此，无论您有什么定位问题，都不一定是偏移的问题，尽管您可以通过使用top，left，right和bottom属性来解决它。

您的问题浏览器不兼容吗？

Answer 2

对我来说，它是vertical-align：baseline vs vertical-align：top导致顶部偏移。

Answer 3

快速修复：

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

这应该平衡掉那些偏移，但也许你应该看看你的整个布局，看看那个盒子如何与其他盒子互动。

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

但请注意，在您的情况下， offset 可能无法（仅）从CSS偏移计算。

Answer 4

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

Answer 5

如果您使用的是IE开发者工具，请确保您没有意外地将它们保留在较旧的设置中。在我看到它被设置为Internet Explorer 7标准之前，我一直在为同样的问题疯狂。将其更改为Internet Explorer 9标准，所有内容都快速到位。

Answer 6

移动元素顶部：-12px或定位它绝对没有解决问题但只掩盖它

我有同样的问题 - 检查你是否在一个包装元素混合：浮动元素与非浮动元素 - 我的非浮动元素导致浮动元素的这个奇怪的偏移

Answer 7

我在基于.NET的网站上遇到了同样的问题，在DotNetNuke（DNN）上运行，为我解决的问题基本上是表单标签的简单边距重置。基于.NET的网站通常包含在一个表单中，没有重置边距，你可以看到有时会出现奇怪的偏移，主要是当包含一些脚本时。

因此，如果您尝试在您的网站上修复此问题，请尝试在CSS文件中输入：

form {
  margin: 0;
}

Answer 8

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

#element_id {margin: 0; padding: 0}  

并查看是否存在问题。 IE将页面呈现为更多不需要的继承。你应该阻止它这样做。

Answer 9

这看起来很奇怪，但您可以尝试在vertical-align: top中为输入设置CSS。这至少在IE8中修复了它。

Answer 10

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

Answer 11

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

<div></div>

...

Answer 12

只需将大纲设置为无

  

[Identifier] {       概述：无; }

Answer 13

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

一个非常简单的解决方案是使用以下命令将li定义为块元素：

li {
 display: block;
}

偏移量消失了