切换div填充IE中的剩余空间，而不是google chrome或firefox

Question

我使用jQuery的切换函数来切换4个内容块。

如何在Google Chrome中正常工作的截屏视频：http://screenr.com/w8l

在IE 7中，它是如何不工作的截屏视频：http://screenr.com/I8l

请参阅自己的页面：http://www.herkimer.edu/impact

对于您单击的每个标题(h2)，它会在新的行上开始该部分，但在IE7中它会显示该部分

示例html：

<div class="divide-details">
  <h2><a href="#" title="view Student Perspective" class="student-perspective">Student Perspective</a> <a href="#" title="view Student Perspective" class="student-perspective"><span>&raquo;</span></a></h2>
  <div id="student-perspective-details">
        <p>Content</p>
    <div class="clear-both"></div>
  </div>
</div>

<div class="divide-details">
  <h2><a href="#" title="view Social Perspective" class="social-perspective">Social Perspective</a> <a href="#" title="view Social Perspective" class="social-perspective"><span>&raquo;</span></a></h2>
  <div id="social-perspective-details">
    <p>Content</p>
    <div class="clear-both"></div>
  </div>
</div>

<div class="divide-details">
  <h2><a href="#" title="view Taxpayer Perspective" class="taxpayer-perspective">Taxpayer Perspective</a> <a href="#" title="view Taxpayer Perspective" class="taxpayer-perspective"><span>&raquo;</span></a></h2>
  <div id="taxpayer-perspective-details">
    <p>Content</p>
    <div class="clear-both"></div>
  </div>
</div>

<div class="divide-details">
  <h2><a href="#" title="view Business Perspective" class="business-perspective">Business Perspective</a> <a href="#" title="view Business Perspective" class="business-perspective"><span>&raquo;</span></a></h2>
  <div id="business-perspective-details">
    <p>Content</p>
    <div class="clear-both"></div>
  </div>
</div>

CSS

#student-perspective-details,
#social-perspective-details, #business-perspective-details, 
#taxpayer-perspective-details { display:none; border-bottom:1px solid #ccc; clear:both; overflow:auto; width:100%; clear:both; }

.divide-details {
  float:left;
  margin:0 0 5px 0;
  padding:5px;
}

.divide-details h2 {
  font-size:1.5em;
}

.divide-details h2 a:link,
.divide-details h2 a:visited { color:#000; text-decoration:none; }

.divide-details h2 a:hover { color:#01552E; text-decoration:underline; }

.divide-details h2 a:link span,
.divide-details h2 a:visited span { color:#C56B02; text-decoration:underline; }

.divide-details h2 a:hover span { color:#01552E; text-decoration:underline; }

要切换的jQuery

$(document).ready(function() {
    $('.student-perspective').click(function() {
    $("#student-perspective-details").slideToggle(100);
        return false;
    });

  $('.social-perspective').click(function() {
    $("#social-perspective-details").slideToggle(100);
        return false;
    });

    $('.taxpayer-perspective').click(function() {
    $("#taxpayer-perspective-details").slideToggle(100);
        return false;
    });


    $('.business-perspective').click(function() {
    $("#business-perspective-details").slideToggle(100);
        return false;
    });

    $('.student-perspective span').click(function() {
    $("#student-perspective-details").slideToggle(100);
        return false;
    });

  $('.social-perspective span').click(function() {
    $("#social-perspective-details").slideToggle(100);
        return false;
    });

    $('.taxpayer-perspective span').click(function() {
    $("#taxpayer-perspective-details").slideToggle(100);
        return false;
    });


    $('.business-perspective span').click(function() {
    $("#business-perspective-details").slideToggle(100);
        return false;
    });
});

Answer 1

如果没有真正了解它不工作的原因或原因，一个简单的修复方法可能是在slideToggle上应用一个回调函数，该函数将在.divide-details DIV中切换float:left属性。我可以想象，当slideToggle激活时将其移除，并在完成后将其放回原处，这将解决您的跨浏览器问题。

另一种解决方案是在页面加载时将H2元素设置为内联(这样就不会弄乱那些未启用JS的元素的呈现)，删除float:left设置，并在切换详细信息DIVs时切换display:block on/off。

Answer 2

我注意到如果你添加了"display:inline“样式，它就能正常工作。