IE7 HTML/CSS margin-bottom bug

Voici le scénario:

J'ai une table avec un margin-bottom de 19px. Ci-dessous que j'ai un formulaire qui contient des balises html fieldsets. L'un d'eux est flottant à droite. Le problème est que le margin-bottom n'est pas le 19px dans IE7. Je suis passé par tous les IE7 css/marge/float bugs que je pense, et ont essayé des remèdes, mais ont échoué. J'ai cherché sur google pour un certain temps maintenant et ne peut pas trouver quelque chose qui est de nous aider.

Voici ce que j'ai essayé.

  1. Emballage de la forme ou fieldset dans un non stylé div. Aucun changement apparent.
  2. Nixing la marge en bas sur la table et, au lieu de habillage avec un div et en lui donnant un padding-bottom de 19px. Aucun changement apparent.
  3. Nixing la marge en bas sur la table et en ajoutant un div avec une hauteur fixe de 19px. Aucun changement apparent.
  4. Mettre une claire entre la table et le fieldset.

Je sais qu'il en existe d'autres que je suis à l'oublier, mais ce sont les choses que j'ai essayé récemment. Cela se produit à chaque fieldset.

Je suis en utilisant un reset de la feuille de style et un doctype xhtml transitional.

Edit: j'ai aussi la version IE7 web developer toolbar et Firebug. Les informations de style pour les deux navigateurs dit qu'il a un margin-bottom: 19px; mais il n'est clairement pas pour IE7.

OriginalL'auteur mk. | 2008-08-18

  1. 3

    Remplacer margin-bottom: 19px; avec <div/> avec height: 19px.

    Supprimer de style CSS pour margin-bottom et insérez <div/> avec height: 19px entre <table/> et <form/>

    Il a résolu ce problème dans mon cas.

    <table id="mytable">
    <tr>
        <th>Col 1</th>
        <th>Col 3</th>
        <th>Col 2</th>
    </tr>
    <tr>
        <td>Val 1</td>
        <td>Val 2</td>
        <td>Val 3</td>
    </tr>
</table>
<div style="height:19px;"></div>
<form method="post" action="test.html" id="myform">
    Allez, sûrement, nous n'avons pas besoin de toujours recourir à ce.

    OriginalL'auteur user64bit

  2. 2

    si vous avez flotté et unfloated éléments, le seul moyen infaillible pour s'assurer de l'espace vertical entre eux croix-navigateur padding-top sur l'élément.

    J'ai été en mesure de corriger un problème à l'aide de flotter sur les deux éléments ci-dessus et ci-dessous. Cette réponse a obtenu les roues tournent.

    OriginalL'auteur mongo296

  3. 1

    Avez-vous un doctype valide? Sinon IE7 rend en mode quirks, qui est essentiellement IE5.5

    OriginalL'auteur Orion Edwards

  4. 1

    Si vous retirer le flotteur de l'élément en dessous de la table, la marge?

    OriginalL'auteur Jeremy

  5. 1

    J'ai mis en place ce que vous avez décrit, et il est rendu correctement pour moi. Il est probable que vous avez un autre style quelque part qui a un effet sur votre forme, ou de votre table. Si vous ne faites pas déjà, à l'aide d'un réinitialiser.css fichier est extrêmement utile. Si vous voulez voir les styles affectant un élément particulier, la Développeur Web De La Barre D'Outils pour firefox est une pratique de Style de l'Information de commande pour voir les styles (à partir de laquelle les fichiers/style blocs/styles en ligne) sont appliquées. Vous pouvez l'activer en appuyant sur Ctrl+Shift+Y, ou de frapper CSS -> View Style Information

    Voici le code qui a fonctionné pour moi dans IE7:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Test</title>
        <style>
        #mytable {
            margin-bottom: 19px;
            border: solid green 1px;
        }

        #myform {
            border: solid red 1px; 
            overflow: hidden;
        }
        #floaty {
            float: right; 
            border: solid blue 1px;
        }
        </style>
    </head>
    <body>
        <table id="mytable">
            <th>Col 1</th>
            <th>Col 3</th>
            <th>Col 2</th>
            <tr>
            <td>Val 1</td>
            <td>Val 2</td>
            <td>Val 3</td>
            </tr>
        </table>
        <form method="post" action="test.html" id="myform">
            <fieldset id="floaty">
                <label for="myinput">Caption:</label>
                <input id="myinput" type="text" />
            </fieldset>
            <fieldset>
                <p>Some example content</p>
                <input type="checkbox" id="mycheckbox" />
                <label for="mycheckbox">Click MEEEEE</label>
            </fieldset>
        </form>
    </body>
</html>
    A voté, parce que rencontrent le même problème avec flottant élément et c'est margin-bottom dans IE7 (mais il fonctionne bien sur un autre navigateur), alors je suggère que le problème est légitime, contrairement à votre conclusion. Consultez le bogue nº 119 sur cette liste de bugs: gtalbot.org/BrowserBugsSection/MSIE7Bugs

    OriginalL'auteur eplawless

  6. 0

    Je ne sais pas pour sûr, sans test, mais essayez de placer ce entre la table et le fieldset:

    <br style="clear:both;" />
    N'utilisez jamais de pauses (<br />) pour la compensation. Utiliser un div - c'est plus du point de vue sémantique précise.
    Défendable, car <br> signifie "saut de ligne" et <div> est juste pas de sens.
    <div> n'est pas dénuée de sens. La plupart des tout le monde [il] sait que la div a construit dans le saut de ligne. De toute façon, je ne voudrais pas ajouter du style à un <br>.
    utilisation clearfix classe et tais-toi 🙂

    OriginalL'auteur Kevin