¿Por qué un < input > el control en un elemento flotante se desliza demasiado hacia la derecha en IE7, pero no en Firefox?

Question

Es de esperar que una imagen valga más que mil líneas de código porque no quiero tener que eliminar todo el código ASP.Net, HTML, JavaScript y CSS para proporcionar un ejemplo (pero proporcionaré lo que necesito). puedo solicitarlo si alguien no dice "¡Oh, ya lo he visto antes! Intenta esto ...") [En realidad, publiqué algunos códigos y CSS - ver la parte inferior de la pregunta].

Aquí hay una parte de una página de formulario que se muestra en Firefox:

Los cuadros azules son estilos temporales de una etiqueta < label > y las líneas naranjas son estilos de borde temporales de las etiquetas < div > (para que pueda ver donde se extienden y rompen). Los < label > tienen el estilo de float: left así como los < div a la derecha. Además, los controles descendientes del < div > también son float: left simplemente para que se alineen en la parte superior del < div > (ya que hay algunos controles más altos como cuadros de texto de varias líneas abajo).

Los botones de radio son generados por un control ASP, por lo que están envueltos en un < span > - también flotan a la izquierda ya que es un descendiente del < div > .

Aquí está la misma parte de la pantalla representada en IE7:

Hay algunas diferencias de representación menores, pero la grande que me está volviendo loco es el espacio en blanco adicional al lado de los controles < input > . Tenga en cuenta que los < span > alrededor de los botones de radio y las casillas de verificación se alinean correctamente.

Aunque no se muestran, lo mismo ocurre con las listas desplegables y los cuadros de lista. No he intentado envolver los controles de entrada en un < span > , pero podría funcionar. Sin embargo, es un truco feo.

He intentado varias de las soluciones de IE7 para los problemas de la caja y he editado el CSS hasta que estoy en modo de vudú puro (es decir, haciendo cambios al azar con la esperanza de que algo funcione). Como dije, espero que alguien vea esto y diga, "¡Lo he visto antes! Prueba esto ... "

¿Alguien?

Seguimiento 1:

Estoy usando el < DOCTYPE > XHTML 1.0 Transitional, por lo que debería estar en modo estándar.

Seguimiento 2:

Aquí hay un pequeño fragmento del código generado para el anterior (el primer control y el último control). Tenga en cuenta que este código fue generado por ASP.Net y luego editado dinámicamente por 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>

Aquí está la parte relevante del CSS (verifiqué dos veces para asegurarme de que esto duplica el problema):

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 me indicó esta página en IE / Win en márgenes heredados en elementos de formulario y eso fue el problema. Los cuadros de entrada heredaban los márgenes izquierdos de todos sus elementos que contienen. La solución que elegí fue envolver cada elemento < input > en un < span > sin estilo. He estado tratando de mantener la estructura del HTML lo más semánticamente posible, así que lo resolví usando un comando jQuery en la función $ (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>");
    }
});

Tenga en cuenta que esto solo agregará los estúpidos < span > en IE ...

¡StackOverflow al rescate otra vez!

Answer 1

El input está heredando los márgenes del div y el ol . Si lo rodea con otra etiqueta como un tramo o un div, debería resolver su problema.

Editar: Puede encontrar más información y soluciones en http: //www.positioniseverything.net/explorer/inherited_margin.html