jquery - 为什么内容在 IE7 中不环绕 float 图像？

Question

参见:http://hostingcouponsclub.com/codero-coupons .

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

在 Firefox 和 Chrome 下，没问题。

单击红色 more<< 时如何使内容环绕图像IE7 中的文本？

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");
    }   
});