如何使用 CSS 去除元素的偏移量? [英] How do I get rid of an element's offset using CSS?

问题描述

我在某些元素上遇到了定位问题，在检查 IE8 开发人员工具时，它向我显示了这一点:

现在我很确定我的问题是 12 个偏移量，但是我该如何删除它?我找不到任何提及 CSS offset 属性的内容.除了保证金之外，我们还需要偏移量吗?

这是产生这个的代码:

 <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); 边框底部颜色: 按钮面; 边框顶部颜色: 按钮面; 背景重复: 不重复; 边框右颜色: 按钮面;"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;"宽度="300px"/>

有偏移量的元素是inputBox

解决方案

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

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

或

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

因此，无论您遇到什么定位问题，都不一定是偏移量的问题，尽管您始终可以通过调整顶部、左侧、右侧和底部属性来修复它.

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

I've got a positioning problem with some elements, upon inspecting it IE8 Developer tools it shows me this:

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?

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

解决方案

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?

这篇关于如何使用 CSS 去除元素的偏移量?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！