为什么在 IE7 中内容不环绕浮动图像？

Question

请参阅：http://hostingcouponsclub.com/codero-coupons。

当我点击more<<（在红色投票部分上方）时，为什么在 IE7 下内容不环绕图像？

Firefox和Chrome下都可以。

在IE7中点击红色的more<<文字如何让内容环绕图片？

Answer 1

这是因为当 jQuery 动画（你的显示/隐藏函数使用“慢”）时，它会导致动画元素“获得布局”，这反过来会导致文本不换行：Reference

例如你的pr_content div 使用内联样式（在 IE7 中，在 IE8 中有所不同）

<div style="filter: ; zoom: 1; display: block" class="pr_content">

有各种修复，但也有各种错误，我尝试了一些不同的修复，比如删除过滤器，但 removeAttr() 函数也有一个错误，我想可能删除 style attribute 并使用 .css() 应用display:block 或 display: none; 可能有效，但没有乐趣，尽管 YMMV

这是您现有的 jQuery：（来自 idccoupon/scripts.js）

$('.pr_content').hide();
$('.moreteaser').click(function() { 
     $('.pr_teaser').hide();
     $('.pr_content').toggle("slow");
     $(".pr_content").attr("zoom","");
  $('.moreteaser, .lessteaser').toggle();
});

$('.lessteaser').click(function() { 
     $('.pr_content').toggle("slow");
     $('.pr_teaser').show();
     $('.moreteaser, .lessteaser').toggle();

});

注意：我知道attr("zoom", ""); 是解决此问题的推荐解决方案，据我所知，它无法删除zoom 属性。这也是我发现尝试删除其他属性的原因。

通过仅删除 IE 的“慢”命令，我得到了一半的工作（即没有增强 IE），这只是意味着他们得到了即时显示/隐藏而不是“平滑”一个.. 这或只是让 IE 用户像现在这样解开内容可能是最简单的解决方案？

无论如何，这是我使用的代码，以防你想尝试它：

$('.pr_content, .lessteaser').hide();

$('.moreteaser, .lessteaser').click (function() { 
    if (jQuery.browser.msie) {
         $('.pr_content, .prteaser, .moreteaser, .lessteaser').toggle();
    } else {
         $('.pr_content, .prteaser, .moreteaser, .lessteaser').toggle("slow");
    }   
});

Answer 2

这可能是因为<div id="provider_top"> 是浮动的，而<div class="node-body">（它是前者的兄弟）不是。尝试将#provider-top 放在#node-body 中，看看是否可以解决问题。