Warum wird eine schwebte Steuerung in einem schwebenden Elemente gleitet über zu weit nach rechts in IE7, aber nicht in Firefox?

Question

Hoffentlich ein Bild mehr als tausend Zeilen Code wert, weil ich will, um alle den ASP.Net-Code, HTML, JavaScript und CSS nicht habe auszuziehen ein Beispiel zu liefern (aber ich werde liefern, was ich wenn jemand sagen kann auf Anfrage nicht „Oh, ich das schon gesehen habe Try this ...“) [Eigentlich habe ich einige Code und CSS schreiben - siehe unten Frage].

Hier ist ein Teil einer Formularseite in Firefox angezeigt wird:

Die blauen Felder sind vorübergehend Stylings eines <label>-Tag und die orangefarbenen Linien sind temporäre Grenze Stile der <div> Tags (so kann ich sehen, wo sie erweitern und brechen). Die <label> die sind gestylt float: left wie die <div der auf dem rechten Seite. Darüber hinaus sind die Nachkommen Kontrollen des <div> auch float:left rein, so dass sie auf der Oberseite des <div> ausrichten wird (da es einige größere Kontrollen wie mehrzeilige Textfelder sind unten).

Die Radiobuttons von einer ASP-Steuerung erzeugt werden, so dass sie in einem <span> gewickelt -. Auch links schwebte, da es ein Nachkomme des <div> ist

Hier ist der gleiche Teil des in IE7 gemacht Bildschirm:

Es gibt ein paar kleineren Rendering Unterschiede, aber die großen, die mich verrückt ist der zusätzliche Leerraum neben den <input> Kontrollen fahren! Beachten Sie, dass die <span> die rund um die Radio-Buttons und Checkboxen korrekt ausrichten.

Obwohl sie nicht gezeigt sind, geschieht das Gleiche mit Drop-Down-Listen und Listenfelder. Ich habe nicht versucht, die Eingangskontrollen in einem <span> Einwickeln, aber das könnte funktionieren. Es ist ein hässlicher Hack, though.

Ich habe versucht, einige der IE7 Abhilfen für Box Probleme und ich habe die CSS bearbeitet, bis ich in reinem Voodoo-Modus bin (das heißt, so dass zufällige Veränderungen etwas funktioniert die Hoffnung). Wie ich schon sagte, ich hoffe jemand dies betrachten und sagen: „Ich, dass zuvor gesehen haben! Try this ...“

Wer?

Followup 1:

Ich bin die XHTML 1.0 Transitional <DOCTYPE> verwenden, also sollte ich im Standardmodus sein.

Followup 2:

Hier ist ein kleiner Ausschnitt aus dem generierten Code für die oben (die erste Steuerung und die letzte Kontrolle). Beachten Sie, dass dieser Code wurde von ASP.Net erzeugt und dann dynamisch bearbeitet von 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>

Hier ist der relevante Teil des CSS (Ich doppelt überprüft, um sicherzustellen, dass dies das Problem Duplikate):

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;
}

Lösung

Matthew wies mich auf dieser Seite auf IE / Win Inherited Margins auf Formularelemente und das war das Problem. Die Eingabefelder wurden erben die linken Ränder aller ihrer Elemente enthält. Die Lösung I gewählt wurde jedes <input> Element in einem unstyled <span> einzuwickeln. Ich habe versucht, die Struktur des HTML zu halten, wie semantisch Ton wie möglich, so dass ich es gelöst einen jQuery-Befehl in der $(document).ready() Funktion:

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

Hinweis

, dass dies nur die dummen <span> des auf IE hinzufügen ...

Stackoverflow zur Rettung wieder!

Answer 1

Die input erben die Ränder von dem umgebenden div und dem ol. Wenn Sie es mit einem anderen Tag wie eine Spanne oder einem div umgeben, sollte es Ihr Problem lösen.

Bearbeiten Sie können mehr Informationen und Abhilfen finden Sie unter http: //www.positioniseverything.net/explorer/inherited_margin.html