100% largeur div ne s'affiche pas correctement dans IE

Question

Eh bien, j'ai, je pense, une sorte de question inhabituelle. Eh bien, j'ai une page Web avec départ div avec la position absolue.

.head_warp 
{ 
width:100%; 
display:block; 
height:238px; 
margin:0 auto; 
padding:0; 
position:absolute; 
text-align:center; 
background-image:url(images/demo6_fon.png); 
background-position:center; 
background-position:top; 
background-repeat:repeat-x; 
z-index:-9999; 
} 

et après que j'ai un récipient

#container_out 
{ 
width:1024px; 
margin:0 auto; 
} 

Le code HTML est de cette façon:

<div class="head_warp"></div> 
<div id="container_out"></div> 

L'idée est le contenu dans le « conteneur » à afficher sur la " head_warp "et ça marche dans n'importe quel navigateur avec lequel j'ai testé. Chrome, FF, Safari même avec IE8 et IE7. Mais mon collègue est avec IE8 avec windows VISTA et regarde quel est le résultat alt text http://www.pechat.mdkbg.com/problem.jpg

Quel est le problème?

Answer 1

dans IE, 100% largeur utilisera sa largeur de parent, vous devez le mettre à l'intérieur container_out, changer votre container_out css, peut-être ajouter padding-top/margin-top = hauteur de header_warp

Answer 2

Je viens testé dans IE8 sur Vista et il s'est bien affiché.

Il semble que tout ce que div fait est d'afficher une image de fond pour la page. Pourquoi ne pas simplement ajouter l'image de fond à body et se débarrasser de ce div?

Answer 3

@Puaka Je pense que tous les navigateurs sont relatifs au conteneur parent lors de la spécification d'une largeur en pourcentage. Dans ce cas, il devrait être relatif au corps.

Votre DOCTYPE est-il correct?

Si vous positionnez absolument un élément, vous devez spécifier la position supérieure/gauche que vous ne semblez pas faire. En outre, vous spécifiez margin:0 auto; ce qui implique qu'il pourrait y avoir une marge gauche/droite. J'aurais pensé que cela devrait être simplement margin:0;?

Answer 4

On dirait que vous manque des informations pour votre positionnement absolu div:

top: 0; 
left: 0;