如何使用CSS擺脫元素的偏移量？

我有一個定位的問題與一些元素，在檢查其IE8的開發者工具它表明我：如何使用CSS擺脫元素的偏移量？

Where does offset come from?

現在我敢肯定我的問題是，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

來源

2011-01-27 m.edmondson

元素是否定位？檢查`left`和`top`屬性。 – jessegavin 2011-01-27 14:44:29

這裏有一點代碼會非常有用。 CSS中沒有'偏移量'規則，但IE確實有在隨機地方添加隨機像素的傾向。這通常與浮動和定位 – Alex 2011-01-27 14:49:30

我會假設'偏移量'是'與其他元素相關的像素' - 比如前一個元素的邊距推下這個元素。我現在沒有時間去試驗IE開發工具了。 – Quentin 2011-01-27 14:51:03

該偏移量基本上是瀏覽器基於其位置css屬性爲元素計算的x，y位置。所以如果你在它或其他元素之前放置一個<br>，它會改變偏移量。例如，你可以通過它設置爲0：

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

或

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

因此，你有什麼定位的問題，不一定是一個問題與偏移，但你總是可以通過玩修復具有頂部，左側，右側和底部屬性。

是您的問題瀏覽器不兼容？

來源

2011-08-20 18:54:43 Neo

快速修復：

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

這應該抵消這些偏移，但也許你應該看看你的整個佈局，看看這個盒子是如何與其他盒子交互的。

至於術語，left，right，top和bottom是CSS 偏移性質。它們用於在特定位置定位元素（與absolute或fixed定位一起使用），或者將它們相對於其默認位置移動（與relative定位一起使用時）。另一方面，邊距說明了盒子之間的間隙，它們有時會摺疊，因此它們不能可靠地用作偏移量。

但請注意，在您的情況下，偏移量可能無法從CSS偏移量（單獨）進行計算。

來源

2011-01-27 14:54:10

這只是將空白移動到元素的另一側。 – Quentin 2011-01-27 14:55:53

@David什麼空白？爲什麼除了目標盒子之外的東西會被移動？ – 2011-01-27 14:58:58

你可以申請重置CSS來擺脫這些'默認'。這裏是一個重置css http://meyerweb.com/eric/tools/css/reset/的例子。只需在您自己的風格之前應用重置樣式。

來源

2011-11-08 05:35:06 sawe

如果您的問題僅僅是您處於怪癖模式，那麼將頂部屬性和左側屬性設置爲負值可能不是一個好的解決方法。如果頁面缺少<!DOCTYPE>聲明，就會發生這種情況，導致它在IE8中以怪癖模式呈現。在IE8開發者工具中，確保在「文檔模式」下未選擇「怪癖模式」。如果它被選中，則可能需要添加相應的<!DOCTYPE>聲明。

來源

2012-03-14 19:03:19 regularmike