如何使用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

对我来说,它是垂直对齐:基线与垂直对齐:顶部导致顶部偏移.

Answer 3

快速解决:

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

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

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

但需要注意的是,在你的情况下偏移可能不会被计算(仅)由CSS偏移.