Comment réparer Internet explorer 7 bug lors de l'utilisation des largeurs de pourcentage pour la mise en page?
Merci de m'aider dans cette. J'ai besoin de créer une mise en page en utilisant des largeurs de pourcentage. J'ai un wrapper qui est 100% Largeur.
Maintenant, j'ai un DIV (le wrapper principal.. Je veux le garder à 94% de pourcentage de largeur.. 94% de 100% corps).. très bien
Donc pour rendre cela simple.
- > Corps 100% Largeur ensemble
-- > largeur du conteneur 94%
- - - > premier enfant DIV 70% float left (70% du conteneur)
- - - > deuxième enfant DIV 30% float droite (30% de la Conteneur)
Mais j'ai 2 colonnes égales sous la première div enfant
-----> 50% et 50% de largeur en pourcentage
Le bug est: dans ie7.. la dernière colonne est affichée en bas .. ses pas correctement flotté.. Si je réduis la largeur à 29,9%!!! elle fonctionne.. je pense que ie7 a un bug dans le traitement des largeurs de pourcentage ou quelque chose.. Veuillez préciser à ce sujet. J'espère que vous obtenez le problème parce que le CSS / html est juste trop long.. j'espère juste que sa à un problème commun.. :(
Voici le CSS pour cela DIV .. J'espère que cela aide :)
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;
}
4 réponses
Le problème est l'arrondi des sous-pixels. Lorsque vous concevez avec des pourcentages, il y aura des moments où le calcul ne donne pas de pixels complets (70% de 721px est 504.7 px). 721 est arbitraire, mais en utilisant des pourcentages, vous rencontrerez des nombres arbitraires. Il n'y a pas de moyen d'éviter cela. La plupart des navigateurs trouvent une solution d'arrondi pour vous qui ne casse pas la mise en page. IE7 (et plus) simplement arrondir. Arrondi, 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 tenir 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 qu'une combinaison float/width. Je l'utilise quand je peux. Vérifiez-le ici:
Http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/
L'autre solution que j'ai trouvée quand 'overflow' juste ne coupe pas c'est d'ajouter une petite marge négative au dernier élément d'affilée. Si vous flottez à gauche, ajoutez une marge négative de plusieurs pixels à 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).
J'espère que ça aide. Acclamation.
Voici la solution simple pour cela:
div {
*min-width: 100%;
}
Testé dans IE7.
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]-->
Essayez ce qui suit:
div {
width: 100%;
*overflow: auto;
}
Cela fonctionne bien dans IE7.