Problème avec la valeur de marge négative dans Firefox

J'ai un problème avec une marge négative dans Firefox. Ma marge négative fonctionne dans Chrome, mais ne fonctionne pas dans Firefox.

.search-bar {
    height: 108px;
    position: relative;
    margin-top: -10px;
}
Je trouve cela fonctionne le mieux sur FF avec positition:absolute

OriginalL'auteur Al-Mothafar | 2014-01-31

  1. 15

    La solution tout simplement :

    .search-bar {
    height: 98px;
    position: relative;
    top: -10px;
}

    J'ai Remplacé margin-top avec top avec la même valeur, et j'ai diminué height avec de vieux margin-top valeur, et a travaillé comme un charme.

    Mais encore une fois si vous ne connaissez pas la hauteur ce n'est probablement pas la bonne façon de le faire
    essayez d'ignorer la hauteur. dans mon cas ici, j'ai besoin de prendre soin de la hauteur, si vous n'avez pas la hauteur, alors vous n'avez pas à faire quelque chose avec elle, mais vous avez peut-être besoin de faire quelques emballage dans certains cas.
    si cela ne fonctionne pas pour vous. Essayez de donner à l'actuel div display:inline-block; de la propriété, puis il travaille dans Firefox ou vous pouvez utiliser float:left. et si display: inline-block; ou float:left sauts de la largeur de votre question, de lui donner un autre width: 100%;.

    OriginalL'auteur Al-Mothafar

  2. 4

    Pour tout le monde ayant toujours le même problème, il suffit d'ajouter float:left à l'élément DOM avec la marge négative. Grâce à @Deepak Ram Baran Yadav pour la solution.

    en fait, un flotteur n'est pas seulement l'option de la propriété, il pourrait se briser, la mise en page!
    Yup, mais dans mon cas ça fonctionne parfaitement et la solution ci-dessus ne fonctionne pas. Je suis juste de donner une autre option pour les personnes qui pourraient tomber sur ce problème.
    À l'aide de display: inline-block devrait également travailler et peut-être plus compatible avec votre mise en page que float:left
    cette réponse doit être marqué correct float: left et width: 100% a fonctionné comme un charme

    OriginalL'auteur John Isaiah Carmona

  3. 1

    Veuillez utiliser haut de la propriété au lieu de margin-top et attribuer position par rapport

    Mon Exemple:

    div span {
    display: inline-block;
    top: -10px;
    width: 100%;
    height: 3px;
    line-height: 40px;
    position: relative;

    }

    OriginalL'auteur shyvijay

  4. 1

    Je l'ai fait et cela fonctionne de manière parfaite.

    .your__class{
    display:inline-block;
    vertical-align:top;
    margin-top:-100px;
}

    OriginalL'auteur Jung Rupak Dhiran