CSS Double bordure avec h1 et travée

Je veux chevaucher le "border-bottom" de <span> au-dessus de la bordure inférieure de <h1>. Dans Google Chrome et Opera fonctionne très bien, mais dans Firefox, il y a une différence de 1 pixel. J'ai essayé beaucoup de méthodes mais semble toujours différent dans Firefox. Est-il possible d'améliorer cela dans Firefox ou d'utiliser d'autres méthodes qui ne s'étendent pas nécessairement?CSS Double bordure avec h1 et travée

Désolé pour mon mauvais anglais :(

Mon HTML.

<h1><span>My Title Test<span></h1>

CSS:

h1 { 
border-bottom:1px solid #ccc; 

} 
span{ 
border-bottom:1px solid #000; 
display: inline; 
}

Démo: http://jsfiddle.net/9WuBk/

Source

2012-04-02 Adukuni

Je vois le même résultat dans Firefox 11 que Chrome et Opera ... – BoltClock

Je vois dans Firefox 11: http://desmond.imageshack.us/Himg641/scaled.php?server = 641 & filename = capturadepantalla201204.png & res = moyen – Adukuni

Ok. Ce que je veux, c'est ceci (comme je le vois dans Chrome et Opera): http://desmond.imageshack.us/Himg42/scaled.php?server=42&filename=capturadepantalla201204j.png&res=medium – Adukuni

frontières Inline ne se vide pas généralement avec leurs frontières de blocs parents. nt différemment, cela finit par être inconsistant.

Vous pouvez contourner ce cas précis en faisant votre <span> un bloc en ligne pour normaliser la position des frontières, puis en donnant votre <span> une marge inférieure -1px pour le déplacer vers le bas (ou plutôt, tirer la frontière <h1> vers le haut):

h1 { 
    border-bottom:1px solid #ccc; 
} 
span { 
    border-bottom:1px solid #000; 
    display:inline-block; 
    margin-bottom:-1px; 
}

Updated fiddle

Source

2012-04-03 00:08:22 BoltClock

Cela fonctionne parfaitement! Merci! Je sais que ce n'est pas la meilleure façon, mais je ne connais pas d'autre technique pour obtenir le même effet que je veux. – Adukuni

CSS Double bordure avec h1 et travée

Répondre

Questions connexes