2011-01-06 6 views
1

Internet Explorer 7で正しく表示されない2つの左浮動ボックスに問題があります。
2つの小さなdivボックスがあり、それぞれにその他、どちらも左に浮いています。最初のボックスはコンテナから少し離れたところに25pxの左余白があり、隣のボックスには2つのボックスの間にスペースを確保するために15pxの左余白があります。
ページがInternet Explorer 7で読み込まれると、最初のボックス(25ピクセル左余白あり)は最初は正しく表示されますが、ページの読み込みが完了すると、余白がないように突然左にジャンプします。
フロートに2つのボックスを設定すると、問題は解決したように見えますが、実際には左に浮かせる必要があります。誰もがこの問題を解決する方法の手掛かりを持っていますか?IE7フローティングボックスがページロード後にジャンプする

更新:
私はこの問題は、約何ができるか見るために少し周りを見てきました。まず、hasLayoutプロパティを試しましたが、問題とは何の関係もないようです。しかし、2つのボックスの下には、ページロード時のAJAXリクエストによってコンテンツが埋め込まれたdivがあります。私がAJAXリクエストを無効にすると、ボックスは左にシフトするのではなく、その位置を維持するように見えます.AJAxを介してコンテンツを受け取る人が上のdivに影響するように見えることはありません。 CSSプロパティは、$ .postを(実行するjQueryの機能によって改ざんされていない); ...

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> 

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

おかげ

+0

問題を示す[JS Bin](http://jsbin.com/)または[jsFiddle](http://jsfiddle.net/)を作成できますか? – thirtydot

答えて

関連する問題