Как предотвратить изменение размера div в IE6?

Вот моя разметка (живое воспроизведение):

<body>
  <div style="text-align:center">header <input class='datepicker'/></div>
  <table><tr><td>really wide table.....................</td></tr></table>
</body>

Когда средство выбора даты активировано, ширина элемента div заголовка изменяется с ширины экрана на ширину таблицы (больше). Это приводит к тому, что центрированное содержимое заголовка смещается в его новый центр... что очень раздражает.

Это происходит в IE6, но не в FF3.5, IE8 или в режиме совместимости с IE8.

Каков наилучший способ зафиксировать ширину блока заголовка в соответствии с шириной окна (а не содержимого)?

Примечание: вероятно, есть гораздо более простой пример, чем средство выбора даты — возможно, что-то, что не связано с jQuery — это просто триггер, который поразил меня, поэтому я публикую его таким образом. Вот пример, который добавляет элемент dom, не вызывая этой проблемы.


html css jquery-ui internet-explorer-6 quirks-mode
person Michael Haren    schedule 20.10.2009    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Мне казалось, что никакая простая комбинация контейнеров или директив CSS не работает. Вот что я в итоге сделал (у меня уже есть jquery в моем стеке):

// set the header div's width in px on page load/window resize
$(window).bind('load resize', function() {
  $('#header').css('width', $(window).width() - 20 /* scrollbars */);
});

Это, безусловно, решение с клейкой лентой: оно лечит симптомы больше, чем первопричину ... но, похоже, работает достаточно хорошо, чтобы я мог перейти к более лучшим вещам.

Я уверен, что для этой проблемы существует чистое решение css... если оно у вас есть, опубликуйте его!

person Michael Haren    schedule 21.10.2009