Position absolue Problèmes dans les anciennes IE

Question

.top_line { 
background:#003466; 
float:left; 
height:107px; 
width:100%; 
} 
.header_logo { 
background:url("../images/header.png") top no-repeat; 
position: absolute; 
height:107px; 
width:910px; 
} 
.page_wrapper { 
margin:0px auto; 
width:910px; 
} 

<div class="top_line"></div> 
<div class="header_logo" align="center"></div> 
<div class="page_wrapper"> 

L'image d'en-tête apparaît correctement mosaïquées au-dessus de la couleur de fond sur FF, Chrome, et les nouvelles versions de IE. Cependant, il apparaît directement à la droite de la barre de couleur de fond sur les anciennes versions de IE. Comment puis-je réparer ça?

Answer 1

Je résolu le problème en déplaçant le header_logo dans le CSS top_line et a fini avec

.top_line { 
display:inline; 
clear: both; 
background:#003466; 
background-image: url("../images/header.png"); 
background-position: top center; 
background-repeat: no-repeat; 
float:left; 
height:107px; 
width:100%; 
} 

Answer 2

C'est un problème IE6.

Une solution commune ajoute:

clear: both; 

ou

clear: left; 

ou

clear: right; 

en fonction de votre flotteur dans la feuille de style.

Ajoutez comme ceci:

.top_line { 
clear: both; 
background:#003466; 
float:left; 

Si cela ne fonctionne pas, essayez:

* { 
    margin: 0; 
} 

avec et sans lui.

Ce sont quelques-unes des choses que j'ai faites pour contourner le même problème dans IE6.