Why doesn't content wrap around floated image in IE7?
See: http://hostingcouponsclub.com/codero-coupons.
When I click the more<<
(above the red poll part) why under IE7 the c开发者_如何学Goontent 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");
}
});
It's probably because <div id="provider_top">
is floated and <div class="node-body">
(which is a sibling to the former) is not. Try putting #provider-top
inside #node-body
to see if that fixes it.
精彩评论