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

Posted 2023-03-05

【中文标题】如何使用 CSS 消除元素的偏移量？

【英文标题】：How do I get rid of an element's offset using CSS?

【发布时间】：2011-06-16 14:35:07

【问题描述】：

我遇到了一些元素的定位问题，在检查它时 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的元素

【问题讨论】：

你的元素定位了吗？检查left 和top 属性。

一点代码在这里会非常有用。 CSS 中没有“偏移”规则，但 IE 确实倾向于在随机位置添加随机像素。它通常与浮动和定位有关

我会假设“偏移”是“与其他元素相关的像素” - 例如前一个元素的边距将这个元素向下推。我现在没有时间尝试 IE 开发工具来找出答案。

我已经添加了完整的内联 CSS 代码，所以我们可以看到发生了什么

是否有我们可以查看的网页示例 - 例如，我们可以将 firebug 指向它并了解更广泛的页面。例如。您的输入控件是否继承了另一个 CSS 定义的边距或填充？

【参考方案1】：

在我的例子中，偏移量被添加到一个 li 内具有网格布局的自定义元素中，而 ul 是一个垂直弹性框。

非常简单的解决方案是将 li 设置为块元素

li 
 display: block;

而且偏移量消失了

【参考方案2】：

对我来说，导致顶部偏移的是 vertical-align: baseline 与 vertical-align: top。

尝试设置vertical-align: top

【讨论】：

这比使用绝对定位要好

您的回答太棒了，当我有 4 个拒绝对齐的内联块 div 时，我必须设置垂直对齐这一事实是公牛。你结束了几个小时的工作。谢谢。

使用嵌入在 <li> 元素中的 <button>。

【参考方案3】：

我在我们基于 .NET 的网站上遇到了同样的问题，在 DotNetNuke (DNN) 上运行，为我解决的基本上是表单标签的简单边距重置。基于 .NET 的网站通常包装在一个表单中，并且在不重置边距的情况下，您有时会看到奇怪的偏移量出现，主要是在包含一些脚本时。

因此，如果您尝试在您的网站上解决此问题，请尝试将其输入到您的 CSS 文件中：

form 
  margin: 0;

【讨论】：

我遇到了同样的问题，更改表单边距也对我有用。

【参考方案4】：

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

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

【讨论】：

在我的例子中，我试图将网站的外观与原型的外观相匹配。我有一排与原型宽度相同的内联块 div，但我的偏移量减少了 4。我发现我在网站上混合了浮动 div 和非浮动 div。使它们全部浮动消除了额外的偏移量。这尤其令人困惑，因为我看不出 CSS 之间有什么不同。

【参考方案5】：

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

【参考方案6】：

如果您使用的是 IE 开发人员工具，请确保您没有不小心将它们留在较旧的设置中。在我看到它被设置为 Internet Explorer 7 标准之前，我一直在为同样的问题发疯。将其更改为 Internet Explorer 9 标准，一切都立即到位。

【讨论】：

我们中的一些用户仍在使用 IE7。

【参考方案7】：

define margin and padding for element面临的问题：

#element_id margin: 0; padding: 0  

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

【参考方案8】：

只需像这样将大纲设置为无

[标识符] 大纲：无；

【参考方案9】：

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

#inputBoxposition:absolute;top:0px;left:0px;

或

#inputBoxposition:relative;top:-12px;left:-2px;

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

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

【讨论】：

请参阅 Stony 关于垂直对齐的评论。修复对齐设置似乎比强制覆盖浏览器对元素的定位更可取。

【参考方案10】：

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

<div></div>

...

【讨论】：

UpdatePanel 是 ASP.NET 的东西，对吧？因为这似乎不是一个 ASP.NET 问题。

事实上，如果您查看问题中的代码 sn-p 您会注意到这是一个 ASP.NET 问题。

啊。抱歉，只是略读了一下，没有注意到 asp:TextBox。 FWIW，issue 不是 ASP.NET issue。当这个问题出现时，通常意味着有问题的偏移是由于某些其他元素更大，如果它导致布局错误，关键通常是减少其他元素的边距、填充或边框相同的父 div。

【参考方案11】：

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

【参考方案12】：

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

【参考方案13】：

快速修复：

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

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

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

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

【讨论】：

这只是将空格移动到元素的另一侧。

@David 什么空格？为什么除了目标框之外的任何东西都会被移动？

空白是没有任何内容的空间。目标框以外的东西不会被移动，这就是重点。如果你在下方 1px 有东西，然后向上移动 12px，那么它在下方 13px 而不是 1px。

@David 我们对空格的定义可能不同，但我明白你想说的话。我同意将差距移到另一边。我将解决方案标记为“快速修复”，因为它可能可用也可能不可用。在提问者提供更多细节之前，这是我唯一可以建议的。