CSS IE7の問題は、だから私はSOすなわち</p> <p>、一度タブにあるタブをマッチング白い背景と、そのタブの表示のためのコンテンツをクリックすると、タブメニューを持って</p> <p>コンテンツ

Question

包み込むないDIV。 IE7の問題は、タブのコンテンツは表示されますが、コンテンツはタブdivの外に出て背景に移動することです。これはIE7でのみ発生します。

<div class="tabContentRow"> 
    <div class="tabContentImageLeft" style="DISPLAY: inline"> 
     <a href="" target="_blank"> 
     <img width="110" height="110" alt="Video" src="~/?w=110&amp;h=110&amp;as=1" /> </a> 
    </div> 
    <div class="tabContentCopyRight" style="DISPLAY: inline"> 
     <h2>video</h2> 
     <p>Text here.</p> 
    </div> 
</div> 

をたどり、問題は、私はこれら2つのdiv内のコンテンツを入れても、IE7いけない場合、それはとどまる私の2つのdiv

<div class="tabContentImageLeft" style="DISPLAY: inline"> 
<div class="tabContentCopyRight" style="DISPLAY: inline"> 

に関係しているように、コンテンツのマークアップがありますうまく私のタブのdiv内に。しかし、私がそれを置く場合、タブのdivはドロップダウンし、それはちょうど背景にブレンドしません。

.tabContentImageLeft {float: left; width: 130px; text-align: center;} 
.tabContentCopyRight {float: left; width: 575px;} 

Answer 1

tabContentRowの下部にクリアdivを追加します。あなたの要素はフローティングであり、そのためにDOMフローから取り出されます。

<div class="tabContentRow"> 

      .....Inner tab markup 


     <div class="clear-fix" style="clear:both;display:block;"></div> 
    </div>