89 votes

Comment se débarrasser du décalage d'un élément à l'aide de CSS ?

J'ai un problème de positionnement de certains éléments. En inspectant les outils du développeur d'IE8, j'obtiens le résultat suivant :

Where does offset come from?

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

0 votes

Votre élément est-il positionné ? Vérifiez left y top propriétés.

6 votes

Un petit code serait très utile ici. Il n'existe pas de règle de "décalage" en CSS, mais IE a tendance à ajouter des pixels aléatoires à des endroits aléatoires. C'est généralement lié aux flottants et au positionnement.

0 votes

Je suppose que le terme " décalage " désigne des " pixels liés à d'autres éléments ", par exemple une marge sur un élément précédent qui pousse celui-ci vers le bas. Je n'ai pas le temps d'expérimenter avec les outils de développement d'IE pour le découvrir.

43voto

Neo Points 2870

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

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

ou

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

Par conséquent, le problème de positionnement que vous rencontrez 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 une incompatibilité de navigateur ?

2 votes

Veuillez également consulter le commentaire de Stony sur l'alignement vertical. Il semble préférable de corriger le paramètre d'alignement plutôt que de forcer le positionnement de l'élément par le navigateur.

33voto

Stony Points 2137

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

Essayez de mettre vertical-align: top

2 votes

C'est mieux que d'utiliser le positionnement absolu

2 votes

Votre réponse est géniale, le fait que je doive définir l'alignement vertical alors que j'ai 4 divs inline-blocks qui refusent de s'aligner est une connerie. Vous avez mis fin à des heures de travail. Merci.

0 votes

Travaillé avec un <button> intégré dans un <li> élément.

9voto

Alin Purcaru Points 21373

Une solution rapide :

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

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

Quant à la terminologie, left , right , top y bottom sont des CSS décalage propriétés. Elles sont utilisées pour positionner les éléments à un emplacement spécifique (lorsqu'elles sont utilisées avec la propriété absolute o fixed ou pour les déplacer par rapport à leur emplacement par défaut (lorsqu'il est utilisé avec la fonction relative positionnement). Les marges, quant à elles, spécifient les espaces entre les cases et elles s'effondrent parfois, de sorte qu'elles ne peuvent pas être utilisées de manière fiable comme décalages.

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

0 votes

Cela déplace simplement l'espace blanc de l'autre côté de l'élément.

0 votes

@David Quel espace blanc ? Et pourquoi tout ce qui n'est pas la boîte ciblée serait déplacé ?

0 votes

L'espace blanc est un espace qui ne contient rien. Les éléments autres que la boîte ciblée ne seront pas déplacés, c'est le but. Si vous avez quelque chose 1px en dessous, et que vous le déplacez de 12px, alors il sera 13px en dessous au lieu de 1px.

3voto

regularmike Points 414

Définir les propriétés top et left à des valeurs négatives pourrait ne pas être une bonne solution de contournement si votre problème est simplement que vous êtes en mode quirks. Cela peut se produire s'il manque à la page un élément <!DOCTYPE> ce qui entraîne un rendu en mode "quirks" dans IE8. Dans les outils de développement d'IE8, assurez-vous que l'option "Quirks Mode" n'est pas sélectionnée sous "Document Mode". Si c'est le cas, vous devrez peut-être ajouter l'attribut <!DOCTYPE> déclaration.

2voto

Tom McGee Points 31

Si vous utilisez les outils de développement d'IE, vérifiez que vous ne les avez pas accidentellement laissés à un réglage plus ancien. Je me suis rendu fou avec ce même problème jusqu'à ce que je voie qu'il était réglé sur les normes d'Internet Explorer 7. Je l'ai changé pour Internet Explorer 9 Standards et tout s'est mis en place.

1 votes

Certains d'entre nous ont des utilisateurs qui utilisent encore IE7.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X