Différence de hauteur de ligne de 1 pixel entre Firefox et Chrome

Aucune de ces réponses résoudre le problème.

Jeu:

line-height: 1;
padding-top: 2px;

parce que les moteurs de rendu webkit & mozilla mettent en œuvre la hauteur de ligne différemment ne l'utilisent pas pour manipuler la mesure pour les articles de ligne simple.

pour les éléments comme les menus, les boutons et surtout les bulles de notification vraiment petites, réinitialisez la hauteur de la ligne à la normale et utilisez le rembourrage ou les marges pour les faire se comporter de la même façon.

voici un JSFiddle illustrant ceci question: http://jsfiddle.net/mahalie/BSMZe/6/

je viens d'avoir ce même problème, et je l'ai résolu en définissant explicitement la hauteur de la ligne et la taille de la police en <li> un élément qui contient le <a> éléments de l'onglet liens. Espérons que cela aide quelqu'un dans l'avenir.

(liens HTML modifiés)

cependant, vous pourriez aussi vouloir vérifier les valeurs ligne-hauteur (ou ajouter une valeur, s'il n'y a pas déjà) sur le contenant ul ou div élément. Bricoler avec ça m'a permis d'obtenir le rembourrage exactement le même dans FireFox, Chrome et IE.

Voici la solution que j'ai trouvé dans cette page:

   button::-moz-focus-inner {
        border: 0;
        padding: 0;
    }

je me bats avec ce problème depuis un petit moment maintenant, et presque abandonné sur le pixel. Cependant, il est venu à moi dans un de ces moments eurika: si vous obtenez l'onglet aligné parfaitement dans le Chrome (qui laisse un chevauchement dans Firefox), mettre la hauteur ul à la hauteur du li (y compris tout rembourrage), vous pouvez supprimer les pixels offensants dans Firefox en mettant débordement caché sur l'ul.

J'espère que cela aidera quelqu'un là-bas!

j'ai eu exactement le même problème, il s'avère que chrome avait zoom réglé à 110% et qui cassait le menu. J'ai remarqué quand j'ai allumé chrome sur un autre ordinateur et il avait l'air bien.

j'ai eu le même problème avec mes onglets principaux les affichant en Chrome, ils étaient à un pixel de moins en hauteur et là pour laisser une vilaine fente entre les onglets et le fond blanc de l'ordinateur central.

j'ai résolu le problème en donnant l'onglet div une marge supérieure avec une flottait valeur. D'abord essayé marge-top:0.1 px rien puis 0.2 etc. jusqu'à ce qu'avec une marge supérieure de 0,5 tout affiché bien sur tous les principaux navigateurs.

j'ai rencontré ce problème en relation avec le texte avec des fonds transparents.

Je n'ai pas pu obtenir l'une des solutions ci-dessus pour fonctionner de manière cohérente, donc j'ai fini par utiliser un hack webkit pour donner à ces navigateurs une hauteur de ligne différente. Comme ceci:

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .your-class {
        line-height:20px;
    }
}

Pouah, hacky! J'essaie d'éviter les hacks de la CSS mais je n'ai pas trouvé d'autre moyen. J'espère que ça aide quelqu'un.

j'ai réussi à résoudre ce problème avec une police web à mon travail, en définissant les éléments suivants:

.some-class {
    display: inline-table;
    vertical-align: middle;
}

Accordés c'est très orthodoxe, mais fait le travail. Cela signifie bien que vous aurez des styles de cible spécifiquement pour Internet Explorer

j'ai eu un problème similaire et il était dû à l'utilisation ems Pour les tailles de police, les marges et le rembourrage. Les navigateurs contournaient l'ems différemment et causaient des problèmes intermittents de non-by-1px sur tout le site selon la longueur du contenu. Une fois que j'ai tout changé en mesures de pixels, mes problèmes ont disparu.

Espérons que cette aide!

essayez d'utiliser display:block avec l'élément" par exemple...

<li><a href="">Link</a></li>

css:

li{line-height:20px;}/*example only*/

li a{display:block;}

je suppose que c'est la seule façon , l'utilisation des styles différents pour les différents navigateurs, la problématique des sections

/* FOR MOZILLA */
@-moz-document url-prefix() { 
.selector {
 color:lime;
}
}
/* FOR CHROME */
@media screen and (-webkit-min-device-pixel-ratio:0) { 
/* Safari and Chrome, if Chrome rule needed */
.container {
 margin-top:100px;
}
/* Safari 5+ ONLY */
::i-block-chrome, .container {
 margin-top:0px;
}``

si line-height est utilisé pour aligner verticalement le texte dans un conteneur( ce qui ne devrait pas être le cas), alors un comportement cohérent entre les navigateurs peut être appliqué comme ceci:

line-height: 75px
height: 75px
overflow: hidden

-moz-height:2em;

on peut aussi utiliser:

@-moz-document url-prefix{
    // your css
}

je pourrais être un débutant dans CSS, mais j'ai trouvé le même problème dans W3Cschools.com, dans un de leurs exemples.

http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_hover_nav

cet exemple concerne les sprites d'image. Vous pouvez voir dans cet exemple, dans Chrome, l'icône home et l'icône prev ont la ligne de diviseur 1px, ce qui n'est pas le cas dans Firefox.

il semble que dans Chrome le nombre de pixels soit de 1pixel différent de celui de Firefox.