Правильно реализовать Colorbox в IE (все версии) - PullRequest
6 голосов
/ 18 февраля 2010

Я выдернул свои волосы (и потратил много времени), чтобы попытаться выяснить, почему Colorbox не работает должным образом на следующей странице: [ссылка удалена]

В самом нижнем правом углу я установил тестовую ссылку Colorbox с надписью «Web Design By All Web Cafe», которая должна открывать небольшое изображение логотипа. В Firefox, Safari и т. Д. Модал ведет себя так, как должен, открывая центр в центре над всем существующим содержимым на странице. В IE не только модал не центрирован, но и создается впечатление, что он не подчиняется абсолютному позиционированию и выталкивает весь существующий контент на странице внизу. Добавьте к этому тот факт, что он не открывается до правильного размера и не создает полосы прокрутки рядом с модальным изображением, и у нас есть один уродливый модал.

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

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

Любые мысли или предложения будут с благодарностью.

Ответы [ 2 ]

16 голосов
/ 20 февраля 2010

ПОЛУЧИЛ ЭТО !!! .. после изменения МНОГО вещей в моем коде (имел ту же проблему) ...

Просто положите:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

.. в самом начале вашей страницы. Это должно быть ДО включает или все остальное.

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

Мариано.

2 голосов
/ 20 февраля 2010

Отлично поймай моего друга. Я работаю с парой разработчиков над моим веб-проектом, и у меня возникла такая же проблема. Не могу понять, почему он работал в Firefox, а не в IE (все версии). Сделал то, что вы сказали, проверил тип документа и, конечно же, он не был завершен. Один из других разработчиков, должно быть, скопировал некоторый устаревший код. В любом случае, мы не используем строгий xhtml, мы используем переходный xhtml, и он все еще позволит colorbox работать правильно в IE (все версии) и Firefox. Ниже мой код, который я использовал, чтобы заставить работать colorbox:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" >

Спасибо Мариано за помощь в этом. Спасло много часов разочарования!

Тоби Гутьеррес

...