Comment puis-je supprimer le décalage d’un élément à l’aide de CSS?

J’ai un problème de positionnement avec certains éléments, en inspectant les 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, mais comment puis-je le supprimer ? 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:

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 l’atsortingbut position css. Donc, si vous placez un élément devant lui ou un 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, il ne s’agit pas nécessairement d’un problème de décalage, mais vous pouvez toujours le résoudre en jouant avec les atsortingbuts top, left, right et bottom.

L’incompatibilité de votre navigateur est-elle problématique?

Pour moi, c’était vertical-align: baseline vs vertical-align: top qui causait le décalage supérieur.

Solution rapide:

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

cela devrait équilibrer ces compensations, mais peut-être devriez-vous examiner l’ensemble de votre mise en page et voir comment cette boîte interagit avec les autres boîtes.

En ce qui concerne la terminologie, left , right , top et bottom sont des propriétés de décalage CSS. Ils sont utilisés pour positionner des éléments à un emplacement spécifique (lorsqu’ils sont utilisés avec absolute positionnement absolute ou fixed ) ou pour les déplacer par rapport à leur emplacement par défaut (lorsqu’ils sont utilisés avec relative positionnement relative ). Les marges, quant à elles, spécifient les écarts 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, ce décalage ne peut pas être calculé (uniquement) à partir des décalages CSS.

Définir les propriétés top et left sur des valeurs négatives peut ne pas être une bonne solution si votre problème est simplement que vous êtes en mode bizarre. Cela peut se produire si la page ne contient pas de déclaration , ce qui entraîne son rendu en mode quirks dans IE8. Dans IE8 Developer Tools, assurez-vous que “Mode Quirks” n’est pas sélectionné sous “Mode Document”. Si elle est sélectionnée, vous devrez peut-être append la déclaration appropriée.

Si vous utilisez les outils de développement IE, assurez-vous de ne pas les avoir accidentellement laissés à un ancien paramètre. Je me suis rendu fou avec ce même problème jusqu’à ce que je voie qu’il était réglé sur Internet Explorer 7 Standards. Il est devenu Internet Explorer 9 Standards et tout a été mis en place.

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

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é ce décalage étrange à celui flottant

définir la marge et le remplissage de 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 inheritance plus indésirable. vous devriez l’empêcher de le faire.

Cela semble étrange, mais vous pouvez essayer de définir vertical-align: top dans le CSS pour 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 des marges de la balise de formulaire. Les sites Web basés sur .NET sont souvent enveloppés sous une forme et, sans réinitialiser la marge, vous pouvez voir apparaître le décalage étrange, surtout lorsque certains scripts sont inclus.

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

 form { margin: 0; } 

Vous pouvez appliquer une réinitialisation CSS pour vous débarrasser de ces «parameters 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 de UpdatePanel. La solution consistait à append une balise vide avant le UpdatePanel comme ceci:

 

Juste définir le contour à aucun comme ça

[Identifiant] {aperçu: aucun; }