Comment réparer le bug Internet Explorer 7 lors de l'utilisation des largeurs de pourcentage pour la mise en page?

Question

S'il vous plaît aidez-moi dans ceci. J'ai besoin de créer une mise en page en utilisant des largeurs en pourcentage. J'ai un emballage qui est 100% de largeur.

Maintenant, j'ai un DIV (la principale enveloppe .. Je veux le maintenir à 94% le pourcentage de largeur .. 94% du corps 100%) .. ok bien

Donc, pour faire ce simple.

-> CORPS largeur 100% fixé

-> 94% CONTAINER largeur

---> PREMIER ENFANT DIV flotteur 70% gauche (70% du récipient)

- -> DEUXIÈME ENFANT DIV 30% flotteur droit (30% du conteneur)

Mais j'ai 2 colonnes égales en PREMIER ENFANT DIV

-----> 50% et 50% pourcentage largeur

Le bug est: En IE7 .. la dernière colonne est affichée en bas .. son pas correctement flotté .. Si je réduire la largeur à 29,9% !!! cela fonctionne .. je pense que ie7 a un bug dans le traitement des largeurs de pourcentage ou quelque chose .. S'il vous plaît clarifier sur ce point. J'espère que vous obtenez le problème parce que le css/html est tout simplement trop long .. J'espère que son un problème commun .. :(

Voici le CSS pour cette DIV .. Hope that helps :)

body { 
width: 100%; 
background: #fff; 
text-align: center; 
font-size: 12px; 
} 

#wide-primary { 
background: #fff url(img/shadow1.png) repeat-x top; 
position: relative; 
top: -1px; 
} 

#primary { 
width: 94%; 
margin: 0 auto 0 auto; 
text-align: left; 
} 

#features { 
float: left; 
width: 70%; 
padding: 2% 0 0 0; 
} 

.featurebox { 
float: left; 
width: 48%; 
padding: 0 2% 3% 0; 
} 

#lastnews { 
float: right; 
width: 30%; 
padding: 2% 0 2% 0; 
} 

Answer 1

Le problème est l'arrondissement des sous-pixels. Lorsque vous concevez avec des pourcentages, il y aura des moments où le calcul ne donnera pas de pixels complets (70% de 721px est 504.7px). 721 est arbitraire, mais en utilisant des pourcentages, vous rencontrerez des nombres arbitraires. Il n'y a pas moyen d'éviter ça. La plupart des navigateurs trouvent une solution d'arrondi pour vous qui ne casse pas la mise en page. IE7 (et plus ancien) simplement arrondir. En arrondissant, la largeur de votre conteneur à 721px inclura une boîte à 505px et une autre à 217px pour un total de 722px - plus de 100%. À ce stade, IE décide que la deuxième boîte ne peut pas s'adapter et la laisse tomber ci-dessous.

Il existe différentes solutions en fonction de votre situation. Nicole Sullivan a une solution intéressante basée sur l'utilisation de 'overflow: hidden;' sur votre dernière colonne plutôt que sur une combinaison flottant/largeur. Je l'utilise quand je peux. Check it out ici:

http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/

L'autre solution que j'ai trouvé quand « overflow » coupé juste n'est d'ajouter une petite marge négative au dernier élément dans une rangée. Si vous flottez à gauche, ajoutez une marge négative de plusieurs pixels sur la droite. Flottant à droite, ajoutez-le à gauche. Je n'ai pas eu d'effets négatifs de cela (bien que je serais heureux d'entendre si d'autres le font).

Espérons que ça aide. À votre santé.

Answer 2

Voici la solution simple pour cela:

div { 
*min-width: 100%; 
} 

testé dans IE7.

Answer 3

C'est ce que j'utilise pour résoudre ce problème sur IE 7.

<!--[if IE 7]> 
    <style> 
     body { 
     padding:0 1% 0 0; 
     width:101%; 
     } 
    </style> 
<![endif]--> 

Answer 4

les opérations suivantes:

div { 
    width: 100%; 
    *overflow: auto; 
} 

Il fonctionne bien dans IE7.