2010-02-27 6 views
3

Lorsqu'un intervalle est imbriqué dans un div avec un arrière-plan différent, il y a un petit espace au-dessus et au-dessous. FF ne rend pas comme ça.Chrome ne restitue pas l'étendue dans div correctement

Voici le code html:

<html> 
<body> 
    <div style="background-color:magenta"> 
    <span style="background-color:cyan">Nested</span> 
    </div> 
    <div style="background-color:cyan">Can you see that magenta line ?</div> 
</body> 
</html> 

Est-ce que quelqu'un a fait l'expérience?

Merci PS: Je suis en chrome bêta 5.0.307.9 sous Xubuntu 9.10

+1

tout simplement parce que FF il fait d'une façon, ne signifie pas qu'il est dans le bon sens. Mon dieu, regarde un IE! Ils ont fait à peu près, tout le mal pour quoi ... Plus de 10 ans maintenant? Les gens ont considéré que la norme pendant très longtemps. (C'était l'âge des ténèbres de l'Internet.) Accordé FF ne se rapproche pas d'IE, mais quand même. Tout le monde lit les règles différemment, vous devriez redéfinir chaque propriété css à ce que vous attendez pour rendre votre environnement cohérent entre les navigateurs. Si vous avez une question, allez au W3C et voyez ce que ça devrait être. –

Répondre

7

Le problème est la valeur par défaut line-height. Les navigateurs varient sur la façon dont ils définissent la hauteur de ligne par défaut ("normal") mais beaucoup font un toucher de plus de 1em (la hauteur par défaut d'une durée). Essayez de régler explicitement la hauteur de ligne à 1em:

<span style="background-color:cyan;line-height:1em;">Nested</span> 

ou

<div style="background-color:magenta;line-height:1em;"> 

Si vous souhaitez utiliser une hauteur de ligne supérieure à 1em, vous devrez marquer la durée display:inline-block afin de permettre sa couleur de fond pour remplir la hauteur de la ligne plutôt que la 1em de la travée en ligne:

<div style="background-color:magenta;line-height:2em;"> 
    <span style="background-color:cyan;display:inline-block;">Nested</span> 
</div> 
+0

L'une des mauvaises choses que le W3C a fait. Presque tout est laissé à l'interprétation de leur norme, et aucun défaut n'est donné pour tout le monde. Je suis ravi de voir que le W3C a bien réglé les problèmes avec HTML5 et résolu certains de ses problèmes majeurs avec la norme dans son ensemble. –

+0

C'est exactement ce que je cherchais! Merci beaucoup :) – Bruno

Questions connexes