web-dev-qa-db-fra.com

Comment se débarrasser de l'offset 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, il me montre ceci:

Where does offset come from?

Maintenant, je suis presque sûr que mon problème est ce décalage de 12, mais comment puis-je l'enlever ? Je ne trouve aucune mention d'une propriété offset CSS. Avons-nous besoin d'un décalage 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

htmlcssinternet-exploreruser-interface
86
m.edmondson

Ce décalage est fondamentalement 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> devant lui ou tout autre élément, le décalage sera modifié. Par exemple, vous pouvez le définir sur 0 par:

#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 avez, 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, droit et bas. 

Votre navigateur est-il incompatible?

42
Neo

Pour moi, c'était vertical-align: baseline vs vertical-align: top qui causait le décalage du haut.

29
Richard

Solution rapide:

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

cela devrait équilibrer ces compensations, mais peut-être devriez-vous jeter un coup d'œil à l'ensemble de votre mise en page et voir comment cette case interagit avec d'autres cases.

En ce qui concerne la terminologie, left, right, top et bottom sont CSS offset properties. Ils sont utilisés pour positionner des éléments à un emplacement spécifique (lorsqu'ils sont utilisés avec un positionnement absolute ou fixed) ou pour les déplacer par rapport à leur emplacement par défaut (lorsqu'ils sont utilisés avec un positionnement relative.). Les marges, en revanche, spécifient les espaces entre les cases et elles s’effondrent parfois, elles ne peuvent donc pas être utilisées de manière fiable en tant que compensations.

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

9
Alin Purcaru

La définition de valeurs négatives pour les propriétés top et left peut ne pas constituer une solution de contournement satisfaisante si votre problème est simplement que vous êtes en mode quirks. Cela peut arriver si une déclaration <!DOCTYPE> manque dans la page, ce qui la rendra en mode quirks dans IE8. Dans les outils de développement IE8, assurez-vous que le "Mode Quirks" n’est pas sélectionné sous "Mode Document". Si cette option est sélectionnée, vous devrez peut-être ajouter la déclaration <!DOCTYPE> appropriée.

3
regularmike

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

2
Tom McGee

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

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

2
Picard

Cela semble étrange, mais vous pouvez essayer de définir vertical-align: top dans CSS pour les entrées. Cela corrige cela dans IE8, au moins.

1
BrainCoder

J'avais le même problème sur notre site Web .NET, fonctionnant sur DotNetNuke (DNN) et ce qui le résolvait 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 regroupés dans un formulaire et, sans réinitialiser la marge, vous pouvez voir le décalage étrange apparaître parfois, surtout lorsque des 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;
}
1
Vlastique

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.

1
Trix

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.

0
sawe

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

enter image description here

La solution assez simple a été de définir le définit le li comme élément de bloc avec

li {
 display: block;
}

Et l'offset était parti

0
Michaël Vanderheyden

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

[Identifiant] { contour: aucun; }

0
Daniel Barde

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

<div></div>

...

0
mitkob