2010-01-22 3 views
2

J'ai un problème avec la bordure dans IE7. Pour une raison quelconque la frontière montre que de la gauche et le côté droit:Bordure supérieure et inférieure manquante dans IE7

IE7, rend incorectly:

alt text http://i47.tinypic.com/166bz8l.gif

FF, rend correctement:

alt text http://i45.tinypic.com/do5lqs.gif

L'utilisation de ce CSS :

.tags a { 
    background:#fff; 
    border:1px solid #D8DFEA; 
    padding:5px; 
    margin-left:5px; 
    color:#3B5998; 
    font-size:14px; 
} 

Qu'est-ce que je fais mal?

Répondre

5

Les bordures sont probablement coupées par la hauteur du conteneur .tags. Le css pour .tags a lui-même semble OK.

Notez que puisque <a> est un élément en ligne vous ne pouvez pas définir sa hauteur (sauf si vous le définissez sur display:block). La différence de hauteur est probablement due au rendu différent des polices par différents navigateurs. Attention également à Safari qui a tendance à rendre les polices plus grosses (en prenant plus de pixels) que tous les autres navigateurs.

+0

Que dois-je faire dans ce cas? –

+1

Montrez-nous la règle css de '.tags' ou tout autre conteneur parent où height est défini. Le css que vous nous montrez ne cause pas le bogue. – slebetman

+0

Excellent champion, quand je l'ai mis à afficher le bloc, ils sont allés dans des lignes séparées, j'ai ajouté float à gauche, maintenant ça marche tnx –

2

J'ai juste eu le même problème dans IE. Je pense que cela était dû au fait que je fixais la taille de la police dans cette div.

J'ai défini la ligne-hauteur pour correspondre à ma police, et cela fonctionne dans IE, FF, Chrome, Opera, Safari - ouais!

+0

ligne-hauteur fixé le problème qui se passait dans IE9 aussi! – Dave

0

solution de Helena a travaillé pour moi aussi, mais pour clarifier, je devais régler la line-height du <div> autour d'être un peu plus grande que la taille de la police du <a>.

donc quelque chose comme ceci:

<div style="line-height:40px"> 
    <a style="font: 14px/36px Arial; ...."> 
</div> 
Questions connexes