切换 div 填充 IE 中的剩余空间，但不填充 google chrome 或 firefox答案

【问题标题】：toggle div fills up remaining space in IE but not google chrome or firefox切换 div 填充 IE 中的剩余空间，但不填充 google chrome 或 firefox
【发布时间】：2011-05-23 00:32:15
【问题描述】：

我使用 jQuery 的切换功能来切换 4 块内容。

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

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

请自行查看页面：http://www.herkimer.edu/impact

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

示例 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;
    });
});

【问题讨论】：

标签： jquery html css

【解决方案1】：

如果没有真正深入了解它为什么或如何不工作的细节，一个简单的解决方法可能是在 slideToggle 上应用一个回调函数，该函数会从 .divide-details DIV 切换 float:left 属性。我想在 slideToggle 激活时将其删除，并在完成后将其放回将解决您的跨浏览器问题。

另一种解决方案是在页面加载时将 H2 元素设置为内联（这样您就不会弄乱那些没有启用 JS 的渲染），删除 float:left 设置，并切换 display:block on/切换您的详细信息 DIV 时关闭。

【讨论】：

【解决方案2】：

我注意到如果您添加样式“display:inline”，它就可以正常工作。

【讨论】：