フロートIE

Question

に問題

#a { 

margin-top:25px; 
float:right; 
width:390px; 
margin-left:0px; 
margin-right:48px; 
padding-left:5px; 
border:thin; 
border-color:#999999; 
border-style:solid; 
border-radius: 10px; 
margin-bottom:50px; 
} 

#b { 
margin-top:25px; 
/*margin-right:450px; */ 
width:390px; 
margin-left:50px; 
margin-right:0px; 
/* padding-right:5px; */ 
border:thin; 
border-color:#999999; 
border-style:solid; 
border-radius: 10px; 
margin-bottom:50px; 


} 

しかし、問題はIEで（同じ行に）#Aに平行に表示されない#Bれるだけ

Answer 1

あなたのオブジェクトにposition:relative;を追加します。あなたは#aと#bを含んでいるものにもそれをしなければならないかもしれません。

また、同様にあなたのマークアップ事項の

Answer 2

順序を#Aするfloat:left;を追加する必要があります。これを正しくレンダリングされます

<div id="b"></div> 
<div id="a"></div> 

ほとんどのブラウザが、それは実際に浮動するためのブロック要素を注文する間違った方法だと、IEが補償されていません。私の推測では、あなたのマークアップのようなものに見えるということです。正しい順序：あなたはそれを他の方法を行う場合

<div id="a"></div> 
<div id="b"></div> 

は、IEは「B」ブロック要素をレンダリングし、「」浮いブロック要素は、過去をフロートさせることはできません天井と同じように扱います。

マークアップの順序が間違っていると、@ wajiwのような幅計算の問題が発生する可能性があります。