Come posso sbarazzarmi dell'offset di un elemento usando i CSS?

Ho un problema di posizionamento con alcuni elementi, dopo averlo ispezionato Strumenti per sviluppatori IE8 mi mostra questo:

Ora sono abbastanza sicuro che il mio problema sia quell'offset 12, ma come lo rimuovo ? Non riesco a trovare alcuna menzione di una proprietà offset CSS. Abbiamo bisogno di un offset oltre al margine?

Ecco il codice che produce questo:

 <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>

L'elemento con l'offset è inputBox

Quell'offset è fondamentalmente la posizione x, y che il browser ha calcolato per l'elemento in base al suo attributo css di posizione. Quindi, se metti un <br>prima di esso o qualsiasi altro elemento, cambierà l'offset. Ad esempio, puoi impostarlo su 0 da:

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

o

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

Pertanto, qualunque problema di posizionamento tu abbia, non è necessariamente un problema di offset, anche se puoi sempre risolverlo giocando con gli attributi in alto, a sinistra, a destra e in basso.

Il tuo problema è l'incompatibilità del browser?

Per me, era vertical-align: baselinevs vertical-align: topche stava causando l'offset superiore.

Prova a impostare vertical-align: top

Soluzione rapida:

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

questo dovrebbe bilanciare questi offset, ma forse dovresti dare un'occhiata all'intero layout e vedere come quella scatola interagisce con altre scatole.

Per quanto riguarda la terminologia, left, right, tope bottomsono CSS compensate proprietà. Vengono utilizzati per posizionare gli elementi in una posizione specifica (se utilizzati con absoluteo fixedposizionamento) o per spostarli rispetto alla loro posizione predefinita (se utilizzati con il relativeposizionamento). I margini d'altra parte specificano gli spazi tra i riquadri e talvolta collassano, quindi non possono essere utilizzati in modo affidabile come offset.

Ma nota che nel tuo caso tale offset potrebbe non essere calcolato (esclusivamente) da offset CSS.

L'impostazione delle proprietà in alto e a sinistra su valori negativi potrebbe non essere una buona soluzione alternativa se il tuo problema è semplicemente che sei in modalità stranezze. Ciò può accadere se la pagina manca di una <!DOCTYPE>dichiarazione, causando il rendering in modalità quirks in IE8. In IE8 Developer Tools, assicurati che "Quirks Mode" non sia selezionato in "Document Mode". Se è selezionato, potrebbe essere necessario aggiungere la <!DOCTYPE>dichiarazione appropriata .

Se stai utilizzando gli strumenti per sviluppatori di IE, assicurati di non averli lasciati accidentalmente su un'impostazione precedente. Mi stavo facendo impazzire con questo stesso problema finché non ho visto che era impostato su Internet Explorer 7 Standards. L'ho modificato in Internet Explorer 9 Standard e tutto è scattato al suo posto.

moving element top: -12px o posizionarlo assolutamente non risolve il problema ma lo maschera solo

Ho avuto lo stesso problema: controlla se hai in un unico elemento di avvolgimento misto: elementi fluttuanti con elementi non fluttuanti - il mio elemento non fluttuante ha causato questo strano offset a quello flottante

definire il margine e il riempimento per l'elemento sta affrontando il problema:

#element_id {margin: 0; padding: 0}  

e vedere se il problema esiste. IE esegue il rendering della pagina con un'eredità più indesiderata. dovresti impedirgli di farlo.

Sembra strano, ma puoi provare a impostare vertical-align: topin CSSper gli input. Questo lo risolve almeno in IE8.

Ho avuto lo stesso problema sul nostro sito Web basato su .NET, in esecuzione su DotNetNuke (DNN) e ciò che lo ha risolto per me è stato fondamentalmente un semplice ripristino del margine del tag del modulo. I siti Web basati su .NET sono spesso racchiusi in un modulo e senza reimpostare il margine a volte è possibile vedere lo strano offset apparire, soprattutto quando sono inclusi alcuni script.

Quindi, se stai cercando di risolvere questo problema sul tuo sito, prova a inserirlo nel tuo file CSS:

form {
  margin: 0;
}

Puoi applicare un css di ripristino per sbarazzarti di quei "valori predefiniti". Ecco un esempio di reset css http://meyerweb.com/eric/tools/css/reset/ . Basta applicare gli stili di ripristino PRIMA dei propri stili.

Ho avuto lo stesso problema. L'offset è apparso dopo l'aggiornamento di UpdatePanel. La soluzione era aggiungere un tag vuoto prima di UpdatePanel in questo modo:

<div></div>

...

Basta impostare il contorno su nessuno come questo

[Identificatore] {schema: nessuno; }

Nel mio caso l'offset è stato aggiunto a un elemento personalizzato con layout a griglia all'interno di un li mentre l'ul era un flexbox verticale.

La soluzione piuttosto semplice era impostare la definizione di li come elemento di blocco con

li {
 display: block;
}

E l'offset era sparito