我有以下标记:
<nav id='tab_links'>
<a href='#view1'>One</a>
<a href='#view2'>Two</a>
</nav>
<div id='container'>
<div id='view1'>Short Content</div>
<div id='view2'>Much longer content</div>
</div>
<footer>
<input type='submit' />
</footer>
以及以下样式:
#view2 { display: none; }
#footer { display: block; clear: both; text-align: right; }
#footer * { display: inline-block; text-align: center; }
我使用以下jQuery来交换视图:
$('#tab_links a').click(function() {
var tabToShow = $($(this).attr('href'));
var otherTabs = tabToShow.siblings();
tabToShow.show();
otherTabs.hide();
});
当我为view1
内容换出view2
内容时,页脚会停留在原来的位置,悬停在新内容的中间位置之上。如果我将鼠标悬停在页脚内容上,它会跳到原位。如果我将内容还原为view1
,则页脚会再次停留在view2
的位置,远远低于container
的结尾。
我可以应用哪些样式来使IE重新定位页脚?我已经尝试了以下各种组合:
clearfix
应用于#container
clearfix
应用于#footer
height: auto
应用于#container
height: 30px
应用于#footer input
widgth: 100px
应用于#footer input
答案 0 :(得分:1)
解决方案是将其视为jQuery问题而不是CSS问题。
首先,在jQuery元素上定义一个forceRedraw
函数,只需将元素的类设置为现有类:
jQuery.fn.extend({
forceRedraw: function() {
jQuery(this).each(function() {
this.className = this.className;
});
}
});
然后,在交换视图时:
$('#view1').hide();
$('#view2').show();
$('#footer').forceRedraw();
(此解决方案在jQuery forums)上建议
答案 1 :(得分:0)
有时简单的“溢出:自动;宽度:自动;”应用于#container将解决问题。
请参阅:http://www.atbskate.com/trusktr/2010/03/05/clearing-floats-with-the-overflowauto-css-property/
或者:http://www.quirksmode.org/css/clearing.html
这是你问题的解决方案吗?