Span ne s'aligne pas avec h1 dans ie6

J'ai dans un div, un tag h1 suivi d'un tag span qui sont l'un à côté de l'autre, mais l'envergure est flottante vers la droite. Cela fonctionne dans firefox, chrome et internet explorer 7 et 8, mais pas dans ie6. En IE6, l'étiquette h1 est plus grande sans raison, donc la balise span reste en dessous.Span ne s'aligne pas avec h1 dans ie6

Heres le code:

 <div style="width: 740px; float:left"> 

     <div id="article-header"> 

      <h1><span>Text</span></h1> 

      <span class="breadcrumb">Link1 > Link2</span> 

     </div>

Le Css:

#article-header h1 
    { 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 10px; 
    font-weight: bold; 
    color: #F2612F; 
    text-transform: uppercase; 
    display: inline; 
    position: relative; 
    } 
    .breadcrumb 
    { 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-weight: bold; 
    font-size: 9px; 
    float: right; 
    text-transform: uppercase; 
    vertical-align: baseline; 
    margin-top: 0px; 

    text-align: right; 
    display: inline; 
    }

Source

2010-01-21 LuRsT

Avez-vous un lien direct? Il est parfois plus facile de tester de cette façon. Cependant, essayez une chose pour moi. Ce pourrait être un simple bug d'espace blanc. Il suffit de supprimer les retours de deux lignes afin qu'il ressemble à ceci: '' –

Le CSS que vous avez posté ici, et ce que vous avez en ligne est différent. Est-ce CSS à partir d'une version de développement? –

@Doug Oui, et j'ai aussi retiré les commentaires. – LuRsT

Vous devrez peut-être utiliser un CSS Reset File pour se débarrasser des styles prédéfinis au hasard, dans IE6. Cela élimine toutes sortes de styles "furtifs" qui changent d'un navigateur à l'autre.

Source

2010-01-21 16:24:21

Ne pas utiliser un float:left sur le H1, il suffit d'utiliser display:inline

Si vous avez vraiment besoin d'utiliser float:left pour une raison quelconque, essayez d'ajouter ceci à un IE6 seulement stylesheet:

#article-header h1{ 
    display: inline; 
}

Il ne devrait pas affecter négativement le rendu, mais combiné avec un flottant dans IE6 l'effet est différent d'un plaine display:inline

Source

2010-01-21 16:24:44

Je l'ai corrigé, mais ça ne marche toujours pas dans ie6: S J'ai aussi mis à jour mon code dans le post de discussion – LuRsT

Span ne s'aligne pas avec h1 dans ie6

Répondre

Questions connexes