Как мне избежать изменения размеров 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-compat-mode.

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

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

Источник

1 ответ

Решение

Кажется, мне не помогло ни одно простое сочетание контейнеров или директив 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... если оно у вас есть, пожалуйста, опубликуйте его!

Источник
Другие вопросы по тегам