Как бар Meebo работает так хорошо в кросс-браузерном режиме?

Question

Панель чата Meebo - это небольшая ненавязчивая панель (не считая некоторых необязательных всплывающих окон, которые размещены на некоторых сайтах - хотя базовая панель довольно незаметна), которая прилипает к нижней части области просмотра и добавлен на страницу только с несколькими строками JavaScript. В частности, меня интересует, как им удается добиться того, чтобы позиционирование «нижней части области просмотра» работало так хорошо, последовательно, без мерцания или других кросс-браузерных артефактов.

Обратите внимание, что решение Meebo также НЕ требует определенного DOCTYPE на страницах, даже в IE, поэтому, что бы они ни делали, оно прекрасно работает в режиме IE Quirks. Это ключевой момент - я спрашиваю о том, как заставить панель инструментов нижней части окна просмотра работать даже без контроля над страницей хостинга, кроме добавления тега или кода, который вставляет тег. CSS Fixed отдельно НЕ является приемлемым решением, поскольку он не работает должным образом в режиме IE Quirks.

Кроме того, хотя я и упоминаю панель Meebo в качестве примера, на самом деле я не ищу социальную панель инструментов, поэтому я не могу просто использовать Meebo.

Требуется поддержка браузера - обратите внимание, что Meebo поддерживает все это: IE6, IE7 +, Firefox, Safari, Chrome. Не показывать вообще (но не ломать страницу вообще) приемлемо для IE6, хотя, конечно, предпочтение было бы (как Meebo) нормально работать в IE6. Было бы неплохо иметь другие браузеры, такие как Opera, но мой обязательный список браузеров указан выше.

Answer 1

Простой ответ заключается в том, что для режима причуд и IE6 мы используем возможности выражений CSS для динамического вычисления положения элемента. Как отметил nwellcome, мы предоставляем целевые CSS-файлы для каждого браузера, поэтому мы можем реализовать это поведение без использования ошибок * / _ или других нечетных хаков для браузера.

Кроме того, мы используем интересное поведение движка рендеринга IE, когда, если для элемента HTML или Body задано свойство background, IE будет вычислять расположение фиксированных элементов до перерисовки . Это значительно сокращает мерцание, которое вы обычно видите при использовании основанных на JavaScript подходов изменения положения элемента при прокрутке / изменении размера.

Этот сайт предоставляет большой обзор решения для реализации позиции: исправлено во всех основных браузерах: http://www.howtocreate.co.uk/fixedPosition.html

В нем также упоминается довольно оригинальное решение проблемы мерцания: http://www.howtocreate.co.uk/emails/LinusSylven.html

Надеюсь, это помогло!

Answer 2

Глядя на эту страницу, я вижу, что их решением по умолчанию является использование фиксированной позиции, но затем они загружают беспорядок CSS и javascript для конкретного браузера, создавая URL для этих ресурсов из частей соответствующей информации (браузер, версия и т. д.) и написание / добавление их в качестве элементов стиля и скрипта в элементе head.

Когда я помещаю IE7 в причудливый режим, я вижу, что они постоянно перемещают div с помощью javascript, и на моей машине, по крайней мере, мерцание от перерисовки ужасно, но это, вероятно, лучшее, что можно сделать и быть минимально инвазивным для остальная часть страницы. Другие обходные пути фиксированного положения в режиме quirksmode включают в себя установку абсолютного позиционирования элемента по отношению к области просмотра, что портит абсолютное позиционирование для всего остального на странице.