Pourquoi une < entrée > flottée? le contrôle dans un élément flottant glisse trop à droite dans IE7, mais pas dans Firefox?

Question

Espérons qu'une image vaut mille lignes de code car je ne veux pas avoir à effacer tout le code ASP.Net, HTML, JavaScript et CSS pour donner un exemple (mais je fournirai ce que je peut sur demande si quelqu'un ne dit pas "Oh, je l'ai déjà vu! Essayez ceci ...") [En fait, j'ai posté du code et du CSS - voir le bas de la question].

Voici une partie d'une page de formulaire affichée dans Firefox:

Les boîtes bleues sont les styles temporaires d'une balise < label > et les lignes orange sont des styles de bordure temporaires des balises < div > (pour que je puisse voir où ils s'étendent et se brisent). Les balises < label > ont pour style float: left comme le sont les < div sur la droite. De plus, les contrôles descendants du < div > sont également float: left , de sorte qu'ils s'aligneront au-dessus du < div > (car il y a des contrôles plus grands comme les zones de texte multilignes ci-dessous).

Les boutons radio sont générés par un contrôle ASP. Ils sont donc entourés d'un < span > - également flottant à gauche puisqu'il s'agit d'un descendant du < div > .

Voici la même partie de l'écran rendue dans IE7:

Il existe quelques différences de rendu mineures, mais la plus importante qui me rend fou est l'espace blanc supplémentaire situé à côté des commandes < input > ! Notez que les < span > entourant les boutons radio et les cases à cocher s'alignent correctement.

Bien qu'ils ne soient pas affichés, la même chose se produit avec les listes déroulantes et les zones de liste. Je n'ai pas essayé d'encapsuler les contrôles d'entrée dans un < span > , mais cela pourrait fonctionner. C'est un bidule laid, cependant.

J'ai essayé plusieurs solutions de contournement IE7 pour les problèmes de boîte et j'ai modifié le CSS jusqu'à ce que je sois en mode purement vaudou (c'est-à-dire que je fasse des modifications aléatoires en espérant que quelque chose fonctionne). Comme je le disais, j'espère que quelqu'un va regarder ça et dire: "J'ai déjà vu ça!" Essayez ceci ... "

Quelqu'un?

Suivi 1:

J'utilise le XTLD 1.0 Transitional > DOCTYPE > . Je devrais donc être en mode standard.

Suivi 2:

Voici un petit extrait du code généré pour ce qui précède (le premier contrôle et le dernier contrôle). Notez que ce code a été généré par ASP.Net, puis modifié dynamiquement par JavaScript / jQuery.

 <fieldset id="RequestInformation">
   <legend>Request Information</legend>
   <ol>
     <li>
       <label id="ctl00_ContentPlaceHolder1_txtRequestDate_L" class="stdLabel" 
         for="ctl00_ContentPlaceHolder1_txtRequestDate">Request Date:</label>
       <div class="FormGroup">
         <input id="ctl00_ContentPlaceHolder1_txtRequestDate" class="RSV DateTextBox hasDatepicker" 
           type="text" value="10/05/2004" name="ctl00$ContentPlaceHolder1$txtRequestDate"/>
         <img class="ui-datepicker-trigger" src="/PROJECT/images/Calendar_scheduleHS.png" alt="..." title="..."/>
         <span id="txtRequestDate_error"/>
       </div>
     </li>
     --STUFF DELETED HERE--
     <li>
       <label id="ctl00_ContentPlaceHolder1_chkAppealed_L" class="stdLabel" 
         for="ctl00_ContentPlaceHolder1_chkAppealed"> Request Appealed?</label>
       <div class="FormGroup">
         <span class="stdCheckBox">
           <input id="ctl00_ContentPlaceHolder1_chkAppealed" type="checkbox" name="ctl00$ContentPlaceHolder1$chkAppealed"/>
         </span>
       </div>
     </li>
   </ol>
 </fieldset>

Voici la partie pertinente du CSS (j'ai vérifié deux fois pour m'assurer que le problème est en double):

div
{
    border-style: solid;
    border-width: thin;
    border-color:Orange;
}

label
{
    border-style: solid;
    border-width: thin;
    border-color:Blue;
}

.FormGroup
{
    float:left;
    margin-left: 1em;
    clear: right;
    width: 75em;
}

.FormGroup > *
{
    float:left;
    background-color: Yellow;
}

fieldset ol
{
    list-style: none;
} 

fieldset li
{
    padding-bottom: 0.5em;
} 

li > label:first-child
{
    display: block;
    float: left;
    width: 10em;
    clear: left;
    margin-bottom: 0.5em;
}

em
{
    color: Red;
    font-weight: bold;
}

Solution!

Matthew m'a dirigé vers cette page sur IE / Win sur les marges héritées sur des éléments de formulaire . le problème. Les zones de saisie héritaient des marges de gauche de tous les éléments les contenant. La solution que j'ai choisie consistait à envelopper chaque élément < input > dans un sans style & span . J'ai essayé de garder la structure du code HTML aussi sémantiquement correcte que possible. Je l'ai donc résolue à l'aide d'une commande jQuery dans la fonction $ (document) .ready () :

//IE Margin fix: 
//  http://www.positioniseverything.net/explorer/inherited_margin.html
jQuery.each(jQuery.browser, function(i) {
    if($.browser.msie){
        $(":input").wrap("<span></span>");
    }
});

Notez que cela ne fera qu'ajouter les stupides < span > sur IE ...

StackOverflow à nouveau à la rescousse!

Answer 1

L'entrée input hérite des marges du div et du ol environnants. Si vous l’entourez d’une autre balise, comme une étendue ou une div, cela devrait résoudre votre problème.

Modifier: Pour plus d'informations et pour trouver des solutions de contournement, reportez-vous à http: //www.positioniseverything.net/explorer/inherited_margin.html