margin issue on IE7 with jQuery hover effect on absolute position
Having the absolute position on .nav li p
creates extra margin when hovering an image only on IE7, but without the absolute position, images flicker.
Is there another option than the absolute positioning?
This is what I have:
$('ul.nav li').hover(function() {
$(this).prepend('<p></p>')
.find('p')
开发者_开发知识库 .fadeIn('fast');
}, function() {
$(this).find('p')
.fadeOut('fast', function() {
$(this).remove()
});
});
CSS:
.nav li{
width:360px;
}
.nav li p {
width:360px;
margin: 0;
padding:0;
position: absolute;
display:none;
}
li#stylea {height:138px;background: url(images/1.jpg) 0 -474px no-repeat}
li#stylea p {height:138px;background: url(images/1.jpg) 0 bottom no-repeat;}
li#styleb { height:149px; background: url(images/1.jpg) 0 -176px no-repeat}
li#styleb p {height:149px;background: url(images/1.jpg) 0 -325px no-repeat;}
HTML:
<div>
<ul class="nav">
<li id="stylec"></li>
<li id="styleb"></li>
<li id="stylea"></li>
</ul>
<ul class="nav">
<li id="styled"></li>
<li id="stylee"></li>
<li id="stylef"></li>
</ul>
</div>
my first thing to try is always adding zoom:1 to the element(s) in question. sometimes the parent.. sometimes the child. zoom: 1 happens to put IE7 in line alot.
you'd be surprised how many times that works.
精彩评论