Как мне заставить IE правильно перемещать элемент после изменения размера брата по вертикали?

Question

У меня есть следующий код:

<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

Answer 1

Иногда простой «переполнение: авто; ширина:. авто;»наносится на #container решит проблему

Смотреть это: http://www.atbskate.com/trusktr/2010/03/05/clearing-floats-with-the-overflowauto-css-property/

Или это: http://www.quirksmode.org/css/clearing.html

Было ли это решение вашей проблемы

Answer 2

Решение есть? рассматривать его как проблему jQuery вместо проблемы с CSS.

Сначала определите функцию forceRedraw на элементах jQuery, которая просто устанавливает класс элемента в его существующий класс:

jQuery.fn.extend({ 
    forceRedraw: function() { 
    jQuery(this).each(function() { 
     this.className = this.className; 
    }); 
    } 
}); 

Затем, при замене мнения:

$('#view1').hide(); 
$('#view2').show(); 
$('#footer').forceRedraw(); 

(Это решение было предложено на jQuery forums)