IE6 Float Drop

Je semble avoir un peu de problème avec IE6, normalement je laisserais tomber le support pour IE6 mais le projet sur lequel je travaille est une chance qu'il y aura beaucoup de gens qui visitent le site avec IE6. Si vous avez IE6 et que vous voulez vérifier le problème, utilisez mon lien vers la page d'accueil.IE6 Float Drop

Fondamentalement, le contenu div # est inférieur à la div # gauche. J'ai essayé la méthode Robert Nyman mais cela n'a pas fonctionné. Tout le monde connaît une autre méthode?

<html> 
<style type="text/css"> 
#wrapper{ width:980px; margin:auto; background-color:#fff } 
#header{ width:980px; position:relative } 
#middle{ width: 980px; padding:20px; overflow:hidden; clear:both } 
#left{ float:left; width:200px } 
#main{ width:740px; margin: 0px 0px 0px 210px } 
#content { width: 480px; min-height: 400px; float:left } 
#right{ float:left; width:240px; margin: 0px 0px 0px 10px } 
#footer{ clear:both; width:980px; margin:auto; padding:20px 0 } 
</style> 

<body> 
<div id="wrapper"> 
    <div id="header"> 

    </div> 
    <div id="middle"> 
     <div id="left"> 

     </div> 
     <div id="main"> 
      <div id="content"> 

      </div> 
      <div id="right"> 

      </div> 
     </div> 
    </div> 
</div> 
<div id="footer"> 

</div>

Source

2009-08-16 Anonymous

J'ai ajouté un style="float: left; clear: none;" à la div de contenu, et qu'il fixe, de sorte que le milieu div et le droit div étaient sur le même plan, mais les deux ont été poussés vers le bas de la hauteur de la div gauche . Pourquoi avez-vous enveloppé le contenu div et right div dans un div wrapper mais en laissant le div à gauche? C'est probablement lié.

Source

2009-08-16 14:33:36 Anthony

Tout d'abord, vous avez besoin d'un bon doctype afin que la page soit rendue en mode de conformité aux normes. S'il est rendu en mode quirks, IE utilise un modèle de boîte différent qui change la taille de la plupart de vos utilisateurs.

Est-ce que c'est le main ou le div content qui tombe en panne? Si c'est le div main vous pourriez le faire flotter à gauche à côté de la div left.

Vous devrez peut-être ajuster la taille des éléments. Parfois IE6 a besoin de trois pixels d'espace supplémentaires pour s'adapter aux éléments d'un autre élément.

Source

2009-08-16 14:42:27 Guffa

J'ai résolu le problème!

J'ai utilisé une instruction conditionnelle et a changé le rembourrage de 20 à 10:

<!--[if lte IE 6]> 
<style type="text/css"> 
    #middle{ width: 980px; padding:10px; overflow:hidden; clear:both; } 
</style>

Source

2009-08-16 14:57:11

Il est facile de voir le premier regard des raisons possibles (j'ai même pas plongé dans problème):

1) Toujours utiliser DOCTYPE! Sans cela, vous ne ferez jamais de code de difficulté normale pour les navigateurs.

2) Pour faire de telles choses, essayez d'utiliser les propriétés du flotteur plus souvent!

3) Je suis vraiment surpris de voir bloc avec largeur: 980px; et rembourrage: 20px; cela devrait être placé en bloc avec: largeur: 980px; Rembourrage, inclus dans la largeur - est le passé !!

4) #right a la propriété: float: left; marge gauche: 10px; - et IE6 fait margin-left = 20px dans ce cas - c'est un bug très célèbre. Ajoutez à ce bloc cette propriété: display: inline; et ça va bien se passer (donc, la raison n'est pas dans les paddings, mais dans les marges)

Et n'oubliez pas de lire les normes et recommandations!

Source

2009-08-17 10:21:19

IE6 Float Drop

Répondre

Questions connexes