Flotteur gauche dans un div ne fonctionne pas dans IE7, mais ne sous Firefox et IE8

Lorsque j'ai trois divs qui ont tous flotteur gauche je veux les sections de développer ou de contrat basé sur combien de temps les données à l'intérieur d'eux est.

Par exemple, si la 1ère adresse est très longtemps que je veux la 1ère case, afin d'élargir et de pousser le 2ème plus. Dans Firefox, il est en train de faire cela, mais dans Internet Explorer, il nécessite une largeur de regarder à droite. Dans IE7 il n'a pas le droit d'affichage à tous - chaque div a un tableau avec deux colonnes et dans IE7 il montre la 2ème colonne chemin vers le côté de la page, au lieu de douillet avec la 1ère colonne malgré la mise align=à gauche sur la 2ème colonne et la définition d'une petite largeur sur la 1ère colonne. J'ai la doc type spécifié dans la page principale, et j'ai essayé d'ajouter clear:both avec pas de chance.

Pourquoi la largeur de changer totalement la façon dont le flotteur de l'article s'affiche dans IE et comment puis-je résoudre ce problème? La page doit regarder nice dans IE7.

.FloatingSection
{
    float:left;
    padding-bottom:10px;
    padding-right:10px;
}

<div id="FirstPerson" class="FloatingSection">
</div>
<div id="SecondPerson" class="FloatingSection">
</div>
<div id="ThirdPerson" class="FloatingSection">
</div>

J'ai remarqué que dans IE8 cela ressemble juste fine.

OriginalL'auteur hyprsleepy | 2010-08-02

  1. 6

    Vous devriez presque toujours inclure explicitement la largeur lorsque vous êtes flottant éléments.

    Si vous ne le faites pas, les navigateurs doivent deviner ce que tu veux dire. Dans ce cas, Firefox est de deviner mieux que IE, mais vous ne devriez pas leur faire deviner. Être explicite, où vous pouvez.

    edit: Si vous voulez que tous les trois cases à se développer avec le contenu, je vous suggère de réglage de pourcentage basé sur les largeurs. En général, vous allez avoir à chercher des techniques pour colonne de fluide de mises en page.

    Explicite largeur irait à l'encontre de ce que je suis en train de faire. Je veux la largeur de modifier de façon dynamique basée sur le contenu plutôt que d'être fixe.
    Après avoir regardé ce peu plus, j'ai décidé que j'pouvez soit configurer le navigateur hacks à agir différemment pour IE 7 vs IE 8 et Firefox ou tout simplement composer avec le fait qu'il ne sera jamais regarder droit dans IE 7 et aller à largeur fixe. J'ai décidé sur ce dernier.
    Ignorant ancienne version de IE est une décision que je doit toujours approuver =)

    OriginalL'auteur Triptych

  2. 2

    Viens de découvrir que si vous disposez d'un flotteur et d'une claire appliquée à un DIV IE7 étouffe.

    Au lieu de cela, spécifiez le flotteur, dans le DIV en CSS, mais supprimer l'claire et placer une div vide, après le DIV en question, comme ceci:

    AVANT:

    <div style="float:left; clear:right;">Content goes here</div>

    APRÈS

    <div style="float:left;">Content goes here</div>
<div style="clear:right;"></div>
    IE est le diable sans doute le pire navigateur que j'ai jamais travaillé.

    OriginalL'auteur MarkC80

  3. 1

    Avez-vous envisagé de display:inline-block au lieu de flotter? Je ne pense pas que vous pouvez faire ce que vous voulez de chars ET de soutien c'est à dire sans l'aide de certains JS à définir explicitement largeur sur chaque flottait élément.

    Une autre note, vous ont pour déclarer une deuxième règle distincte pour les éléments de niveau bloc dans IE:

    HTML:

    <div class="foo">test</div><div class="foo">bar</div>

    CSS:

    .foo { display:inline-block; }
.foo { display:inline; } /* Feed this to IE below 9 only with a CC. Don't feed it to modern browsers */

    OriginalL'auteur meder omuraliev