Страница Firefox «двигается» при скрытии / показе div - PullRequest
Новая
       12

Страница Firefox «двигается» при скрытии / показе div

0 голосов
/ 24 марта 2009

У нас есть веб-страница с такой общей структурой: 

<div id="container">
  <div id="basicSearch">...</div>
  <div id="advancedSearch" style="display: none">...</div>
<div>

С этим CSS: 

#container { MARGIN: 0px auto; WIDTH: 970px }
#basicSearch { width:100% }
#advancedSearch{ width:100%;}

У нас есть ссылка на странице, которая позволяет пользователю переключаться между «обычным» и «расширенным» поиском. Ссылка переключения вызывает этот Javascript: 

var basic = document.getElementById('basicSearch');
var advanced = document.getElementById('advancedSearch');
if (showAdvanced) {
    advanced.style.display = '';
    basic.style.display = 'none';
} else {
    basic.style.display = '';
    advanced.style.display = 'none';
}

Все это прекрасно работает в IE.

Это работает и в Firefox - за исключением - когда мы переключаемся (то есть: показываем / скрываем) из одного div в другой, страница «перемещается» в Firefox. Весь текст в «контейнере» перемещается примерно на 5 пикселей влево / вправо, когда вы переключаетесь назад и вперед. Кто-нибудь знает почему?

Ответы [ 5 ]

5 голосов
/ 24 марта 2009

Вызывает ли появление / исчезновение полосы прокрутки?

4 голосов
/ 24 марта 2009

Переключение содержимого может сделать содержимое страницы выше. Проверьте, появляется ли при этом полоса прокрутки, так как это немного повлияет на ширину страницы.

2 голосов
/ 24 марта 2009

Я закончил тем, что сделал: HTML { OVERFLOW-Y:SCROLL; OVERFLOW-X:HIDDEN; }

Вот хороший связанный SO пост.

1 голос
/ 24 марта 2009

Убедитесь, что ваш XHTML правильно сформирован, звучит как висящий DIV (firebug поможет в этом).

На стороне заметки jquery имеет несколько действительно хороших анимаций, которые делают этот переключатель намного приятнее для глаз.

0 голосов
/ 24 марта 2009

Я не знаю почему, но если вы установите Firebug плагин Firefox, вы можете использовать его для отладки вашей проблемы.

Firebug сэкономил мои часы отладки, когда дело доходит до CSS и показывает и скрывает div.

С помощью firebug вы можете увидеть, что может отличаться между двумя div.

В Firefox просто выберите меню «Сервис», затем нажмите «Дополнения», затем нажмите «Получить дополнения» и найдите «firebug».

Одна вещь, которую вы можете попробовать, это спрятаться перед тем, как показывать, это может иметь меньше мерцания. Если вы заставляете страницу расти, это может стать причиной вашей проблемы.

Надеюсь, это поможет.

...