Comment puis-je me débarrasser du décalage d'un élément en utilisant CSS?

J'ai un problème de positionnement avec certains éléments, après l'inspection des outils de développement IE8, cela me montre ceci:

Maintenant, je suis à peu près sûr que mon problème est ce décalage 12, mais comment le supprimer ? Je ne trouve aucune mention d'une propriété de décalage CSS. Avons-nous besoin d'une compensation en plus de la marge?

Voici le code qui produit ceci:

 <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'élément avec le décalage est inputBox

Ce décalage est essentiellement la position x, y que le navigateur a calculée pour l'élément en fonction de son attribut css de position. Donc, si vous mettez un <br>avant lui ou tout autre élément, cela changerait le décalage. Par exemple, vous pouvez le définir sur 0 en:

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

ou

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

Par conséquent, quel que soit le problème de positionnement que vous rencontrez, ce n'est pas nécessairement un problème de décalage, bien que vous puissiez toujours le résoudre en jouant avec les attributs haut, gauche, droite et bas.

Votre problème est-il incompatible avec le navigateur?

Pour moi, c'était vertical-align: baselinevs vertical-align: topqui causait le décalage supérieur.

Essayez de définir vertical-align: top

Solution rapide:

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

cela devrait équilibrer ces décalages, mais peut-être devriez-vous jeter un œil à l'ensemble de votre disposition et voir comment cette boîte interagit avec d'autres boîtes.

En ce qui concerne la terminologie, left, right, topet bottomsont CSS contrebalancées propriétés. Ils sont utilisés pour positionner des éléments à un emplacement spécifique (lorsqu'ils sont utilisés avec absoluteou pour le fixedpositionnement), ou pour les déplacer par rapport à leur emplacement par défaut (lorsqu'ils sont utilisés avec le relativepositionnement). Les marges, quant à elles, spécifient des espaces entre les cases et elles se réduisent parfois, de sorte qu'elles ne peuvent pas être utilisées de manière fiable comme décalages.

Mais notez que dans votre cas, ce décalage peut ne pas être calculé (uniquement) à partir des décalages CSS.

La définition des propriétés supérieure et gauche sur des valeurs négatives peut ne pas être une bonne solution de contournement si votre problème est simplement que vous êtes en mode bizarreries. Cela peut se produire si la page ne contient pas de <!DOCTYPE>déclaration, ce qui entraîne son rendu en mode quirks dans IE8. Dans les outils de développement IE8, assurez-vous que "Mode Quirks" n'est pas sélectionné sous "Mode Document". S'il est sélectionné, vous devrez peut-être ajouter la <!DOCTYPE>déclaration appropriée .

Si vous utilisez les outils de développement IE, assurez-vous de ne pas les avoir accidentellement laissés à un paramètre plus ancien. Je me rendais fou avec ce même problème jusqu'à ce que je vois qu'il était réglé sur les normes Internet Explorer 7. Je l'ai changé pour les normes Internet Explorer 9 et tout s'est bien mis en place.

élément mobile haut: -12px ou son positionnement ne résout absolument pas le problème mais le masque seulement

J'ai eu le même problème - vérifiez si vous avez dans un élément d'emballage mélangé: des éléments flottants avec des éléments non flottants - mon élément non flottant a causé cet étrange décalage par rapport à l'élément flottant

définir la marge et le remplissage pour l'élément est confronté au problème:

#element_id {margin: 0; padding: 0}  

et voir si le problème existe. IE rend la page avec un héritage plus indésirable. vous devriez l'empêcher de le faire.

Cela semble bizarre, mais vous pouvez essayer de configurer vertical-align: topdans le CSSpour les entrées. Cela corrige au moins dans IE8.

J'ai eu le même problème sur notre site Web basé sur .NET, fonctionnant sur DotNetNuke (DNN) et ce qui l'a résolu pour moi était essentiellement une simple réinitialisation de la marge de la balise de formulaire. Les sites Web basés sur .NET sont souvent enveloppés dans un formulaire et sans réinitialiser la marge, vous pouvez voir l'étrange décalage apparaître parfois, principalement lorsque certains scripts sont inclus.

Donc, si vous essayez de résoudre ce problème sur votre site, essayez de le saisir dans votre fichier CSS:

form {
  margin: 0;
}

Vous pouvez appliquer un css de réinitialisation pour vous débarrasser de ces «valeurs par défaut». Voici un exemple de réinitialisation css http://meyerweb.com/eric/tools/css/reset/ . Appliquez simplement les styles de réinitialisation AVANT vos propres styles.

J'ai eu le même problème. Le décalage est apparu après l'actualisation d'UpdatePanel. La solution était d'ajouter une balise vide avant le UpdatePanel comme ceci:

<div></div>

...

Il suffit de définir le contour sur aucun comme ça

[Identifiant] {aperçu: aucun; }

Dans mon cas, le décalage a été ajouté à un élément personnalisé avec une disposition de grille dans un li tandis que l'ul était une flexbox verticale.

La solution assez simple était de définir le définir le li comme élément de bloc avec

li {
 display: block;
}

Et le décalage était parti