Comment réparer Internet explorer 7 bug lors de l'utilisation pourcentage des largeurs de mise en page?

Merci de m'aider dans cette. J'ai besoin de créer une mise en page à l'aide de pourcentage largeurs. J'ai un wrapper qui est de 100% de largeur.

Maintenant, j'ai un DIV (le principal wrapper.. je tiens à le maintenir à 94% du pourcentage de la largeur.. 94% à 100% de corps).. bon

Pour faire simple.

-> BODY 100% de la largeur de définir

--> CONTAINER 94% de la largeur de

---> PREMIER ENFANT DIV 70% de flotteur de gauche (70% du CONTENEUR)

---> SECOND ENFANT DIV 30% flotteur droit (30% du CONTENEUR)

Mais j'ai 2 colonnes identiques sous PREMIER ENFANT DIV

-----> 50% et 50% pourcentage de la largeur de

Le bug est: Dans ie7.. la dernière colonne est affichée sur fond .. ce n'est pas correctement flotté.. Si je diminue la largeur de 29,9% !!! il fonctionne.. je pense que ie7 a un bug dans le traitement de pourcentage largeurs ou quelque chose.. Merci de préciser sur ce point. J'espère que vous comprenez le problème, car le css /html, c'est tout simplement trop long.. j'espère juste que ses un problème commun.. 🙁

Voici le code CSS de cette DIV .. Espérons 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;
}
  • Cela pourrait aider si vous pouvez poster vos feuilles de style CSS.
  • Ok ajouté par votre demande
InformationsquelleAutor Ahmad Fouad | 2009-08-21
  1. 46

    Le problème est sous-pixel de l'arrondissement. Lorsque vous concevez les pourcentages qu'il y aura des moments que les maths n'entraîne pas de plein pixels (70% de 721px est 504.7 px). 721 est arbitraire, mais à l'aide de pourcentages, vous allez rencontrer des nombres arbitraires. Il n'y a pas de moyen d'éviter cela. La plupart des navigateurs trouver un arrondissement solution pour vous qui ne se casse pas la mise en page. IE7 (et plus), il suffit de round up. En arrondissant, votre conteneur largeur à 721px comprendra une boîte à 505px et l'autre à 217px pour un total de 722px - plus de 100%. À ce point, IE décide de la deuxième zone ne peut pas tenir et il tombe au-dessous.

    Il existe plusieurs solutions en fonction de votre situation. Nicole Sullivan a une solution intéressante basée sur l'utilisation de 'overflow: hidden;" dans votre dernière colonne, plutôt que d'un flotteur/largeur de la combinaison. Je l'utilise quand je peux. Découvrez-le ici:

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

    L'autre solution que j'ai trouvé lors de 'débordement' juste ne sera pas coupé, il est à ajouter une petite marge négative pour le dernier élément d'une ligne. Si vous êtes flottant à gauche, ajouter un plusieurs pixels de marge négative sur la droite. Flottant à droite, l'ajouter à la gauche. Je n'ai pas couru dans tout les effets négatifs de ce que (même si je serais heureux de savoir si les autres n').

    Espère que ça aide. Des acclamations.

    • Il aide beaucoup. Fait beaucoup de confusion clair... mais une question demeure dans mon esprit maintenant. À votre avis, combien d'négatif pixels de marge est sûr à ajouter? (et je veux dire la compatibilité inter-navigateur)
    • Désolé de le dire, je suis encore à explorer qui. Dans mon expérience, vous n'avez jamais besoin de plus de quelques pixels pour nettoyer IE (en fonction du nombre de colonnes), et pourquoi aller à la mer? Je n'ai pas vu de croix-navigateur de questions encore, mais je préfère le cacher de navigateurs qui n'en a pas besoin pour la sécurité. Vous pouvez le faire soit dans un IE feuille de style spécifique appelé avec les commentaires conditionnels, ou en ajoutant un dièse au début de la déclaration (si vous préférez hacks - je n'en ai pas) comme tel: #margin-right: -3px;
    InformationsquelleAutor Miriam Suzanne
  2. 8

    Ici est la solution simple pour cela:

    div {
*min-width: 100%;
}

    testé dans IE7.

    • J'ai utilisé ce dans un conditionnelle de la feuille de style pour IE7 avec la régulière "min-width" notation (sans astérisque). Fonctionnait très bien, merci.
    • Vraiment de l'aide totale. merci beaucoup
    • Il est recommandé de ne pas utiliser l' * dans une règle CSS car -> stackoverflow.com/questions/4563651/... au Lieu de cela, vous devriez utiliser IE conditionnelles pour ajouter une classe spécifique pour la version de IE que vous souhaitez modifier.
    InformationsquelleAutor Nedko
  3. 0

    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]-->
    InformationsquelleAutor Erdal Demir
  4. 0

    Essayez ce qui suit:

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

    Il fonctionne bien dans IE7.

    InformationsquelleAutor Poised_flw