Как я могу получить IE, чтобы правильно переместить элемент после того, как брат изменяет размеры по вертикали? - PullRequest
Новая
       12

Как я могу получить IE, чтобы правильно переместить элемент после того, как брат изменяет размеры по вертикали?

0 голосов
/ 15 октября 2010

У меня есть следующая разметка: 

<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

Ответы [ 2 ]

1 голос
/ 15 октября 2010

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

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

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

Затем при смене представлений: 

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

(Это решение было предложено на jQuery форумах )

0 голосов
/ 15 октября 2010

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

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

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

Это было решением вашей проблемы?

...