为什么在IE7中内容不环绕浮动图像? [英] Why doesn't content wrap around floated image in IE7?

问题描述

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

当我单击more<<(红色民意调查部分上方)时，为什么在IE7下内容不会环绕图像?

在Firefox和Chrome下，没关系.

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

解决方案

这是因为当jQuery动画(您的show/hide函数使用"slow")时，它会使动画元素获得布局"，这又导致文本不包装: 参考

例如您的pr_content div可以使用内联样式(在IE7中与在IE8中有所不同)找到类似的内容

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

有各种各样的修复程序，但也有各种各样的错误，我尝试了一些不同的修复程序，例如删除过滤器，但是removeAttr()函数也有一个错误，我想也许是删除style attribute并使用.css()来应用尽管使用YMMV，但display:block或display: none;可能会起作用，但没有任何乐趣.

这是您现有的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没有增强功能)，只是意味着他们得到了即时显示/隐藏而不是平滑"显示/隐藏.像现在一样获取未包装的内容可能是最简单的解决方案?

无论如何，这是我尝试使用的代码:

$('.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");
    }   
});

See: http://hostingcouponsclub.com/codero-coupons.

When I click the more<<(above the red poll part) why under IE7 the content doesn't wrap around the image?

Under Firefox and Chrome, it's ok.

How do I make the content wrap around the image when click the red more<< text in IE7?

解决方案

It's because when jQuery animates (your show/hide function uses "slow") it causes the animated elements to "gain layout" this is turn causes the text not to wrap : Reference

e.g. your pr_content div lands up something like this with inline styles (in IE7, it's different in IE8)

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

There's various fixes but there's also various bugs, I tried a few different fixes like removing the filter but there's a also a bug with the removeAttr() function, I thought maybe removing the style attribute and using .css() to apply display:block or display: none; might work but no joy, though YMMV

Here's your existing jQuery: (from 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();

});

Note: the attr("zoom", ""); which I know is a recommended fix for this problem, is not working to remove the zoom property as far as I can tell.. which is what I found trying to remove other properties too.

I got it to half work (i.e. no enhancement for IE) by removing the "slow" command for IE only, just means they get an instant show/hide rather than "smooth" one.. this or just letting IE users get unwrapped content like they have just now may be the easiest solution?

anyway here's the code I used in case you want to try it:

$('.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");
    }   
});

这篇关于为什么在IE7中内容不环绕浮动图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！