Marge du corps: 0, Div Largeur: problème 100% en FF et Chrome, bien dans IE

Je commence à tirer mes cheveux de ma tête ...Marge du corps: 0, Div Largeur: problème 100% en FF et Chrome, bien dans IE

Je donne les résultats suivants:

<html> 
<head> 
<style> 
    body { margin:0 auto; } 
</style> 
</head> 
<body> 
    <div style="border: solid 1px red; width: 100%;">test</div> 
</body> 
</html>

Cela fonctionne dans IE produire une belle div, une largeur de 100%, pas H ... scrollbar

maintenant dans Chrome et FF, il est 1px plus large que la fenêtre, ce qui provoque un H ... scrollbar

Pourquoi est-ce? Que DEVRAIS-je utiliser à la place?

Merci beaucoup! Albert

EDIT:

J'ai ajouté div {margin: 0; } à la tête et enlevé la largeur: 100% et cela a fonctionné, merci.

Source

2010-03-31 Albert

IE est juste majorly défectueux avec le modèle de boîte. il dose beaucoup de choses de calibrage mal. Il arrive juste que vous avez essayé IE d'abord et pense que d'autres broswer sont cassés. Vous devriez également utiliser des CSS externes. Vous pouvez définir la barre de défilement sur via "overflow: hidden" – thecoshman

Je n'ai pas dit que c'est un bug dans FF et Chrome, je dis juste que j'ai un problème avec ça. J'utilise CSS externe, c'est dans un grand projet et juste créé ce fichier comme un exemple simple du problème. – Albert

Vous avez oublié de désactiver la marge div.

Source

2010-03-31 11:19:39

remplacer le width:100% par margin:0px

Source

2010-03-31 11:23:04 Mironline

Comme trésor déjà souligné. La marge de la division est le problème. Réinitialiser tout avec cette commande:

<style> 
    * { margin:0; } 
</style>

Pour plus d'informations, je vous recommande de lire this article par Eric Meyer à propos du CSS reseting dans tous les navigateurs les mêmes valeurs par défaut.

Source

2010-03-31 11:27:17

Le border est placé en dehors du width, vous obtenez ainsi 100% + 2px. Il suffit de supprimer la propriété width - une div est par défaut 100% de large.

Source

2010-03-31 11:35:55 fuxia

J'ai toujours eu des problèmes avec cela, à la fin, j'ai ajouté un style = "zoom: 1;" à la divs

<div style="zoom: 1;"> 
    <div style="zoom: 1;"> 
     <table style="width: 100%"... 
     ... 
     </table> 
    </div> 
</div>

DIV with overflow:auto and a 100% wide table

Source

2010-03-31 12:45:46 Albert

Marge du corps: 0, Div Largeur: problème 100% en FF et Chrome, bien dans IE

Répondre

Questions connexes