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


88

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:

D'où vient l'offset?

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


Votre élément est-il positionné? Vérifiez leftet toppropriétés.
jessegavin

6
Un petit code serait très utile ici. Il n'y a pas de règle de «décalage» dans CSS, mais IE a tendance à ajouter des pixels aléatoires à des endroits aléatoires. Cela a généralement à voir avec les flotteurs et le positionnement
Alex

Je suppose que «offset» est «pixels liés à d'autres éléments» - comme une marge sur un élément précédent poussant celui-ci vers le bas. Je n'ai pas le temps d'expérimenter les outils de développement IE pour le savoir.
Quentin

J'ai ajouté le code complet avec CSS en ligne afin que nous puissions voir ce qui se passe
m.edmondson

Y a-t-il un exemple de page Web que nous pouvons regarder à ce sujet - par exemple pour que nous puissions pointer Firebug sur elle et comprendre la page plus large. Par exemple, votre contrôle d'entrée hérite-t-il de la marge ou du remplissage d'une autre définition css?
Kris C du

Réponses:


43

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?


2
Veuillez également consulter le commentaire de Stony sur l'alignement vertical. La correction du paramètre d'alignement semble préférable au remplacement forcé du positionnement de l'élément par le navigateur.
Jeremy Condit

33

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

Essayez de définir vertical-align: top


2
C'est mieux que d'utiliser le positionnement absolu
user1

2
Votre réponse est géniale, le fait que je doive définir l'alignement vertical lorsque j'ai 4 divs en bloc en ligne qui refusent de s'aligner est bull. Vous avez mis fin aux heures de travail. Je vous remercie.
Corey Ogburn

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

9

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.


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

@David Quels espaces? Et pourquoi autre chose que la boîte ciblée serait déplacée?
Alin Purcaru le

L'espace blanc est un espace qui ne contient rien. Les choses autres que la boîte ciblée ne seraient pas déplacées, c'est le point. Si vous avez quelque chose de 1px en dessous et que vous augmentez de 12px, alors il est 13px en dessous au lieu de 1px.
Quentin

2
@David Nous n'avons peut-être pas la même définition des espaces, mais je comprends ce que vous essayez de dire. Je conviens que l'écart sera déplacé de l'autre côté. J'ai qualifié la solution de «solution rapide» car elle peut ou non être utilisable. C'est la seule chose que je puisse suggérer jusqu'à ce que le demandeur fournisse plus de détails.
Alin Purcaru le

3

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 .


2

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.


1
Certains d'entre nous ont encore des utilisateurs sur IE7.
15ee8f99-57ff-4f92-890c-b56153

2

é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


Dans mon cas, j'essayais de faire correspondre le look d'un site Web avec celui d'un prototype. J'avais une rangée de divs inline-block avec la même largeur que le prototype, mais mes décalages étaient décalés de 4. J'ai découvert que j'avais un mélange de divs flottants et non flottants sur le site Web. Les rendre tous flottants supprimait le décalage supplémentaire. C'était particulièrement déroutant car je ne voyais pas grand-chose de différent entre le CSS.
Clint Brown

1

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

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


1

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

J'ai eu le même problème et changer la marge du formulaire a également fonctionné pour moi.
David Derman

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.


0

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>

...


1
UpdatePanel est une chose ASP.NET, non? Parce que cela ne semble pas être une question ASP.NET.
Joe Mabel

En fait, si vous affichez l'extrait de code dans la question, vous remarquerez qu'il s'agit d'une question ASP.NET.
mitkob

Ah. Désolé, juste écumé, je n'ai pas remarqué l'asp: TextBox. FWIW, le problème n'est pas un problème ASP.NET . Lorsque ce problème apparaît, cela signifie généralement que le décalage en question est dû au fait qu'un autre élément est plus grand, et si cela entraîne une mauvaise mise en page, la clé est normalement de réduire la marge, le remplissage ou la bordure sur un autre élément dans le même div parent.
Joe Mabel

0

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

[Identifiant] {aperçu: aucun; }


0

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.

entrez la description de l'image ici

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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.