Comment puis-je me débarrasser d'un élément du décalage à l'aide de CSS?

J'ai un problème de positionnement de certains éléments, à l'inspection, il IE8 outils de développement, il m'indique ceci:

Comment puis-je me débarrasser d'un élément du décalage à l'aide de CSS?

Maintenant, je suis sûr que mon problème est que 12 offset, mais comment puis-je supprimer? Je ne trouve pas de mention d'une CSS, la propriété offset. Avons-nous besoin d'un Décalage en plus de la marge?

Voici le code c'est la production de ce:

 <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

  • Est votre élément positionné? Vérifier left et top propriétés.
  • Un peu de code serait très utile ici. Il n'y a pas de "compenser" la règle dans le CSS, mais IE ne l'ont tendance à ajouter des pixels aléatoires dans des endroits aléatoires. C'est généralement pour faire de chars et de positionnement
  • Je suppose que 'offset' est 'pixels liés à d'autres éléments - comme une marge sur un élément précédent, poussant ce une. Je n'ai pas le temps de tester avec IE outils de dev pour en savoir.
  • J'ai ajouté le code complet avec du CSS afin que nous puissions voir ce qui se passe
  • Est-il une page web exemple, nous pouvons regarder cela - par exemple pour que nous puissions firebug et comprendre l'ensemble de la page. E. g. est de votre entrée de contrôle d'hériter de marge ou de remplissage à partir d'un autre css définition?
  • Ill essayer d'obtenir téléchargé quelque part bientôt - très occupé atm :-S
  • J'ai eu le même problème et le plus voté question dans ce post, sauvé mes fesses (merci pour votre ver bien expliqué post). Vous devriez lire si vous êtes prêt à marquer un acceptées solution à votre question.

InformationsquelleAutor m.edmondson | 2011-01-27
  1. 43

    Que le décalage est fondamentalement la position x,y que le navigateur a calculé pour l'élément sur la base de sa position d'attribut css. Donc, si vous mettez un <br> avant ou de tout autre élément, il serait de changer le décalage. Par exemple, vous pouvez régler à 0 par:

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

    ou

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

    Par conséquent, ce problème de positionnement que vous avez, n'est pas nécessairement un problème de décalage, mais on pouvait toujours y remédier en jouant avec le haut,à gauche,à droite et en bas attributs.

    Est votre problème de l'incompatibilité du navigateur?

    • Veuillez voir Pierreux du commentaire à propos de vertical-align ainsi. La fixation du paramètre d'alignement semble préférable à la force des raisons impérieuses le navigateur le positionnement de l'élément.
    InformationsquelleAutor Neo
  2. 31

    Pour moi, c'était vertical-align: baseline vs vertical-align: top qui était à l'origine du haut de décalage.

    Essayer de mettre vertical-align: top

    • C'est mieux que d'utiliser le positionnement absolu
    • Votre réponse est génial, le fait que je dois mettre le vertical align lorsque j'ai 4 inline-block divs qui refusent de s'aligner est le taureau. Vous avez fini les heures de travail. Je vous remercie.
    • Travaillé avec un <button> incorporé dans une <li> élément.
    InformationsquelleAutor Richard
  3. 9

    Quick fix:

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

    cela devrait s'équilibrer ces décalages, mais peut-être que vous devriez jeter un oeil à l'ensemble de votre mise en page et de voir comment cette boîte interagit avec d'autres boîtes.

    Que pour la terminologie, left, right, top et bottom CSS décalage propriétés. Ils sont utilisés pour le positionnement des éléments à un emplacement spécifique (lorsqu'il est utilisé avec absolute ou fixed de positionnement), ou de les déplacer par rapport à leur emplacement par défaut (lorsqu'il est utilisé avec relative de positionnement). Les marges sur l'autre main spécifier l'espacement entre les boîtes et ils parfois s'effondrer, donc ils ne peuvent pas être utilisé de manière fiable que les décalages.

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

    • Qui passe juste à l'espace de l'autre côté de l'élément.
    • Quels espaces? Et pourquoi rien d'autre que la zone ciblée serait déplacé?
    • Une espace est l'espace qui n'a rien en elle. D'autres choses que de la zone ciblée ne serait pas déplacé, c'est le point. Si vous avez quelque chose 1px ci-dessous, et vous déplacer vers le haut 12px, alors il est 13px ci-dessous au lieu de 1px.
    • Nous ne pouvons pas avoir la même définition de l'espace, mais j'obtiens ce que vous essayez de dire. Je suis d'accord que l'écart sera déplacé de l'autre côté. J'ai marqué une solution "miracle", car il peut ou peut ne pas être utilisable. C'est la seule chose que je peux suggérer jusqu'à ce que le demandeur fournit plus de détails.
    InformationsquelleAutor Alin Purcaru
  4. 3

    Définissant les propriétés top et left pour les valeurs négatives ne pourrait pas être une bonne solution si votre problème est tout simplement que vous êtes en mode quirks. Cela peut se produire si la page est manquante <!DOCTYPE> déclaration, à l'origine pour être rendu en mode quirks, dans IE8. Dans IE8 Outils de développement, assurez-vous que "Mode Quirks" n'est pas activée sous "Mode de Document". Si elle est sélectionnée, vous devrez peut-être ajouter les <!DOCTYPE> déclaration.

    InformationsquelleAutor regularmike
  5. 2

    Si vous utilisez plus de la barre d'outils de développement, assurez-vous que vous n'avez pas accidentellement laissé à une ancienne configuration. Je faisais moi-même fou avec cette même question jusqu'à ce que j'ai vu qu'il a été défini de Normes d'Internet Explorer 7. Changé pour Internet Explorer 9 Normes et tout cassé à droite dans la place.

    • Certains d'entre nous ont les utilisateurs sur IE7.
    InformationsquelleAutor Tom McGee
  6. 2

    élément mobile haut: 12px ou de positionnement absolument ne résout pas le problème, mais seulement des masques, il

    J'ai eu le même problème - vérifiez que vous avez dans un élément d'habillage mixte: les éléments flottants avec des non-flottant ceux - ma non-flottant élément qui a provoqué cette étrange décalage flottant, un

    • Dans mon cas, j'ai été de tenter de faire correspondre un site web regarder avec que d'un prototype. J'ai eu une ligne de inline-block divs avec la même largeur que le prototype, mais mon décalages ont été par 4. J'ai découvert que j'avais un mélange de divs flottantes et non flottant sur le site. Ce qui les rend tous flottante supprimé les extra-offset. Cela a été particulièrement perplexe parce que je ne pouvais pas voir grand chose d'autre de différences entre le CSS.
    InformationsquelleAutor Picard
  7. 1

    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 affiche la page avec les plus indésirables de l'héritage. vous devriez cesser de le faire.

    InformationsquelleAutor Pmpr
  8. 1

    Cela semble bizarre, mais vous pouvez essayer le réglage de vertical-align: top dans le CSS pour les entrées. Qu'il fixe dans IE8, au moins.

    InformationsquelleAutor BrainCoder
  9. 1

    J'ai eu le même problème sur notre .NET site web, en cours d'exécution sur DotNetNuke (DNN) et ce que résolu pour moi était au fond qu'une simple marge de réinitialisation de la balise form. .NET sites web sont souvent enveloppés dans une forme et sans remise à zéro de la marge, vous pouvez voir l'étrange décalage apparaissant parfois, surtout quand il y a quelques scripts inclus.

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

    form {
  margin: 0;
}
    • J'ai eu le même problème et la modification de la forme de la marge a également travaillé pour moi.
    InformationsquelleAutor Vlastique
  10. 0

    Vous pouvez appliquer un reset css de se débarrasser de ces "valeurs par défaut". Voici un exemple d'un reset css http://meyerweb.com/eric/tools/css/reset/ . Il suffit d'appliquer le réinitialiser les styles AVANT de vos propres styles.

    InformationsquelleAutor sawe
  11. 0

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

    <div></div>

    ...

    • UpdatePanel est un ASP.NET chose, non? Parce que cela ne semble pas être un ASP.NET question.
    • En fait, si vous affichez l'extrait de code dans la question, vous remarquerez que c'est un ASP.NET question.
    • Ah. Désolé, juste écrémé, n'est-ce pas l'avis de l'asp:TextBox. FWIW, le question n'est pas un ASP.NET question. Lorsque ce problème se présente, généralement ce que cela signifie, c'est que le décalage en question est due à un autre élément est plus grand, et si c'est la résultante de la mauvaise mise en page, la clé est normalement de réduire les margin, padding, ou sur la frontière d'un autre élément dans le même div parent.
    InformationsquelleAutor mitkob
  12. 0

    Il suffit de régler le contour n'est semblable à ce

    [Identifiant] {
    outline:none; }

    InformationsquelleAutor Daniel Barde
  13. 0

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

    Comment puis-je me débarrasser d'un élément du décalage à l'aide de CSS?

    La jolie solution la plus simple était de définir le définir le li comme élément de bloc avec

    li {
 display: block;
}

    Et le décalage était allé

    InformationsquelleAutor Michaël Vanderheyden