CSS IE7 Issue div 没有环绕内容

Question

所以我有一个标签菜单，

所以即

一旦单击选项卡，该选项卡的内容就会显示为与该选项卡匹配的白色背景。 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>

问题与我的两个 div 有关

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

如果我不将内容放在这两个 div 中，那么即使是 IE7，它也会很好地保留在我的选项卡 div 中。但如果我把它放在标签 div 中，它不会下拉，它只会融入背景。

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

Answer 1

在 tabContentRow 的底部添加一个清晰的 div。您的元素是 float 的，因此脱离了 DOM 流。

    <div class="tabContentRow">

           .....Inner tab markup


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