Pourquoi un pixel supplémentaire est-il ajouté aux éléments firefox lorsque j'utilise `line-height: 1` dans ma réinitialisation?

J'utilise cette réinitialisation.Pourquoi un pixel supplémentaire est-il ajouté aux éléments firefox lorsque j'utilise `line-height: 1` dans ma réinitialisation?

* { 
    font-family: Arial, Helvetica, sans-serif; 
    outline: 0; 
    padding: 0; 
    margin: 0; 
    border: 0; 
    text-decoration: none; 
    vertical-align: baseline; 
    white-space: normal; 
    line-height: 1; 
} 
hr {display: none} 
blockquote:before, blockquote:after, q:before, q:after {content: ''} 
blockquote, q {quotes: "" ""} 
ul {list-style-type: none} 
ol {list-style-type: decimal} 
a {text-decoration: none} 

.clear {clear: both}

Le problème est que tant que j'utilise line-height: 1 Je vois un pixel supplémentaire qui ne disparaît pas, peu importe ce que je fais dans mes liens bloc même j'essayé de réglage en hauteur, hauteur de ligne, taille de police pour cela. rien ne fonctionne. S'il vous plaît dites-moi ce qui se passe avec firefox line-height.

Ceci est mon css.

.tag { 
    display: block; 
    font-size: 11px; 
    background: #fff; 
    border: 1px solid #aaa; 
    color: #555; 
    text-transform: lowercase; 
     padding: 3px 6px; 
}

Assez simple oui? Ne semble pas. Firefox va créer un pixel sur le dessus du texte, je peux clairement le voir n'est pas équilibré même si je mets le même remplissage haut et bas. Quelqu'un me dit pourquoi cela se produit, si je supprime la ligne-hauteur: 1 de ma réinitialisation beaucoup d'autres choses se foirent.

Source

2010-12-14 Ahmad Fouad

Avez-vous essayé 'line-height: normal;' ou 'line-height: 100%;'? Pouvez-vous poster un exemple jsfiddle? –

line-height: normal à .tag l'a corrigé. S'il vous plaît dites-moi s'il vous plaît pourquoi !! :) Je n'ai jamais ajouté quelque chose comme ça .. mais s'il vous plaît expliquez-moi pourquoi cela a-t-il résolu le pixel supplémentaire? –

J'ai ajouté une réponse avec ça dedans. De manière spéculative, il est possible que la multiplication de 1 par rapport à la taille de votre police ait causé le pixel supplémentaire d'une manière ou d'une autre, mais je ne suis pas sûr. Avez-vous des tailles de police non entières (ie '1.4em')? –

Essayez d'utiliser line-height: normal;

Cela lui dit de garder la même hauteur que le texte (qui semble être la même chose que line-height:1 mais peut-être Firefox traite différemment).

Source

2010-12-14 20:35:42

Je ne comprends pas, je ne vois pas d'espace en utilisant votre CSS ci-dessus, im en utilisant Firefox 3.6.13

voir Peut-être que si vous pouvez recréer une maquette de votre question sur JSbin?

http://jsbin.com/ajinu3

Source

2010-12-14 20:09:50 Mac

line-height: normal le fixe. Je ne sais pas pourquoi, mais je suis si confus. –

Super de savoir qu'il est maintenant réparé :) – Mac

Pourquoi un pixel supplémentaire est-il ajouté aux éléments firefox lorsque j'utilise `line-height: 1` dans ma réinitialisation?

Répondre

Questions connexes