IE7 Floating-Box springt nach dem Laden der Seite

Question

Ich habe ein Problem mit zwei Links-Floating-Boxen, die nicht korrekt von Internet Explorer 7 gerendert werden.Ich habe zwei kleine div-Boxen, die einige Formularelemente enthalten andere, die beide links schweben. Die erste Box hat einen linken Rand von 25px, um einen gewissen Abstand von dem Container zu bieten, und die Box daneben hat einen linken Rand von 15px, um etwas Abstand zwischen den beiden Boxen zu halten.
Wenn die Seite in Internet Explorer 7 geladen wird, wird die erste Box (mit dem linken 25px-Rand) anfangs korrekt angezeigt, aber wenn die Seite geladen wird, springt sie plötzlich nach links, als hätte sie keinen Rand ..
Wenn ich die beiden Boxen auf Float setze: Richtig scheint das Problem gelöst zu sein, aber ich muss sie wirklich nach links schweben lassen. Hat jemand eine Ahnung, wie man dieses Problem lösen kann?

Update:
Ich habe um ein bisschen geschaut, was das Problem sein. Zuerst habe ich versucht, die hasLayout-Eigenschaft, aber es scheint, dass es nichts mit meinem Problem zu tun hat. Unter den beiden Feldern befindet sich jedoch ein Div, das beim Laden der Seite durch eine AJAX-Anfrage mit Inhalt gefüllt wird. Wenn ich die AJAX-Anfrage deaktiviere, scheinen die Boxen ihre Position zu behalten, anstatt nach links zu gehen. Ich habe keine Ahnung, wie die Beziehung zwischen diesen beiden divs sein könnte, da der Inhalt durch AJAX die oben genannten divs beeinflusst. Die CSS-Eigenschaften nicht mit der jQuery-Funktion Durchführung der $ .post() manipuliert; ..

Die HTML:

<div id="box_a" class="boxes"> 
<h2>Box A</h2> 
    <ol> 
     <li><label for="input1">Input 1</label><input type="text" name="input1" id="input1" /></li> 
     <li><label for="input2">Input 2</label><input type="text" name="input2" id="input2" /></li> 
    </ol> 
</div> 
<div id="box_b" class="boxes"> 
<h2>Box B</h2> 
    <ol> 
     <li><label for="input3">Input 3</label><input type="text" name="input3" id=" input3" /></li> 
     <li><label for="input4">Input 4</label><input type="text" name="input4" id="input4" /></li> 
    </ol> 
</div> 

Die CSS:

div#box_a { 
    float:left; 
    margin-left:25px; 
} 

div#box_b { 
    float:left; 
    margin-left:15px; 
} 

div.boxes{ 
    padding:5px; 
    border:1px solid #C5C5C5; 
    background:#F4F2F3; 
    width:255px; 
    margin-bottom:5px; 
    position:relative; 
} 

Vielen Dank im Voraus

Answer 1

Das ist für mich gearbeitet: ie8 div jumps after page load

In Kurz, verwende padding-left anstelle von margin-left auf den floated-Boxen.