#javascript #jquery #html #css #internet-explorer-7
#javascript #jquery #HTML #css #internet-explorer-7
Вопрос:
Недавно я запустил нашу новую домашнюю страницу, тщательно протестировав ее в каждом из режимов браузера IE9 и документа (не только режим совместимости, но и фактическую эмуляцию IE7 и IE8). Сайт работает в каждом режиме, не говоря уже о современных браузерах. Однако после ее запуска я получил электронное письмо, в котором говорилось, что сайт был сильно поврежден в IE7. Я пошел на заброшенный компьютер и загрузил Windows XP, запустил IE7 и загрузил страницу. К моему ужасу, макет действительно был сломан! (Не только слайд-шоу!)
Самое главное, почему моя страница не работает в IE7, хотя в IE9 она работает в режиме IE7? И в качестве дополнительного вопроса, что может быть «не так» с этим?
Редактировать: Я выяснил, что одной из моих проблем может быть слайд-шоу, но добавление .ie7 #slideshow {display:none !important} даже не скроет слайд-шоу. Я не могу получить к ней доступ через CSS.
Правка 2: Существует еще одна проблема, которая проявляется только в родном IE7 — нижний колонтитул на этой домашней странице и эта страница представляют собой крошечный текст, который нельзя увеличить. Он не делает этого в режиме IE7 в IE9 (несовместимость) или в любом другом браузере. Еще один пример несоответствия.
Комментарии:
1. Это проблема, которая заставляет биться головой о стену.
2. Я только что попробовал из IE8, используя режим совместимости с IE7, и сайт выглядит примерно так же. Некоторые вещи медленно отображаются в конце загрузки страницы. Можете ли вы предоставить скриншот того, как выглядит реальный IE7, и / или описать проблему?
3. Скриншоты: kerrick.imgur.com/ie7_issues
4. Потому что это Internet Explorer! Я имею в виду, да ладно, какой браузер возвращает true для выражения: ‘v’ ==’v’? К счастью, IE7 уже на подходе. Проверьте последнюю статистику использования здесь: w3schools.com/browsers/browsers_explorer.asp
5. @Jonathan w3schools? неааххх, они оказались ненадежным источником.
Ответ №1:
Я не знаю о режиме совместимости IE7 в IE9, но режим совместимости IE7, встроенный в IE8, хорошо известен тем, что не является идеальной копией реального IE7. В нем есть большое количество собственных ошибок и причуд, которые не отображаются в обычном IE7.
Это было достаточно плохо, что я бы никогда никому не рекомендовал использовать режим совместимости для тестирования своего сайта… за исключением того, что вам все еще нужно общаться со случайными пользователями, которые фактически используют режим совместимости в своем браузере live. Таким образом, вместо того, чтобы упростить задачу разработчику, MS фактически усложнила нам задачу, добавив в набор еще один возможный движок рендеринга, который. Вздох.
Я не пробовал режимы совместимости в IE9, но если ваш опыт позволяет судить, то у них все та же проблема. Жаль (но не удивительно), что MS не усвоила эту ошибку с первого раза, когда они допустили ее.
Вместо того, чтобы использовать режимы совместимости для тестирования, лучшее известное мне решение — использовать приложение под названием IE Tester, которое позволяет устанавливать и запускать все версии IE параллельно друг с другом. Он все еще не идеален (единственный способ добиться совершенства, как вы уже обнаружили, — это установить настоящий IE7 на собственной копии XP), но он намного ближе к реальному, чем собственный режим «совместимости» IE.
Комментарии:
1. На самом деле, я не использовал режим совместимости с IE7 в IE9, я использовал режим IE7 в IE9. Тем не менее, теперь я знаю лучше и с этого момента буду тестировать в собственных установках.
2. Запуск Virtual PC с разными образами жестких дисков, содержащими каждый браузер, — это еще один способ запустить IE 6, 7, 8 и 9 на одном компьютере.
3. Что ж, это не решает проблему, но у вас есть лучший ответ с точки зрения предотвращения этого с самого начала. Поэтому я присуждаю вам свою жалкую награду в 50 представителей. 🙂
4. @Kerrick, это по крайней мере дважды с тех пор, как вы заявили, что ваш исходный вопрос / проблема не решена или без ответа. Что это было еще раз? Почему ваша страница выглядит иначе в IE 7, чем в IE 9, работающем в режиме IE 7? Какой ответ вы ищете? Многие люди здесь пытаются сказать вам, что это действительно две разные программы … у каждой будут свои особенности. Что касается ваших двух других проблем… запустите свой код через W3C Validator и исправьте эти проблемы для начала.
Ответ №2:
Я бы рекомендовал использовать HTML5Boilerplate ( http://html5boilerplate.com / ) как источник вдохновения и руководства. Я нахожусь в точно такой же ситуации: веб-разработчик в университете, и мне нужно написать редизайн основного сайта.
Я думаю, вы уже сделали это, основываясь на вашем исходном коде. Вы используете последнюю версию? Возможно, были некоторые обновления шаблона HTML5Boilerplate, которые могли бы решить эту проблему.
Я нашел коллегу с установленным настоящим IE7 и, конечно же, ваша страница выглядит плохо. Затем я проверил свой макет в реальном IE7, и он выглядит нормально (теперь я считаю, что мне очень повезло).
Мой макет также основан на шаблоне HTML5Boilerplate.
Еще одно предложение — попробовать закомментировать блоки кода и попытаться изолировать причину проблемы.
Я думаю, что причиной проблемы (или, по крайней мере, симптомом) является ваше слайд-шоу. Мне пришлось повторно реализовать содержимое моего слайд-шоу, используя 3 разных плагина. В настоящее время я остановился на плагине jQuery cycle для такого рода контента:http://jquery.malsup.com/cycle
Я тоже действительно хочу знать причину проблемы. Кстати, сайт выглядит великолепно, когда отображается так, как он должен выглядеть. Хорошая работа!
Проверьте это сообщение в блоге MSDN:http://blogs.msdn.com/b/ie/archive/2009/03/12/site-compatibility-and-ie8.aspx
Комментарии:
1. Я начал с шаблона, и я думаю, что обнаружил, что одна из самых больших проблем — это то, что слайд-шоу просто не работает. CSS, который я применил к нему, не будет работать, JS, который я использую для управления им, не будет работать (хотя я его пока исключил). Плавающая панель также создает проблему, но она занимает всего около 20 пикселей в сторону, так что в этом нет ничего страшного.
Ответ №3:
Проблема, похоже, в слайд-шоу
Просматривая ваш script.js файл, я вижу это
/*
* Here is the slideshow code.
*/
// Screw ie7...
if ( !($.browser.msie amp;amp; $.browser.version <= 7.0) ){
итак, я бы начал свой поиск там, поскольку, похоже, он игнорирует IE7 и ниже..
Комментарии:
1. хе-хе. предположительно, слайд-шоу — это сторонний скрипт? если это так, как звучит, я бы предположил, что вам придется найти альтернативный скрипт. (имейте в виду, автор действительно делает хороший вывод в этом комментарии!)
2. На самом деле, это мое слайд-шоу. Я вставил этот комментарий и протестировал его, чтобы посмотреть, исправит ли ситуацию отрицание слайд-шоу. С тестированием / исключением или без него, он все еще сломан.
3. Кроме того, слайд-шоу — не единственная проблема. Посмотрите на нижний колонтитул. Кроме того, большой вопрос о том, почему IE7 (работающий на XP) работает иначе, чем IE7 (работающий на IE9), даже не был затронут.
4. @Kerrick- Как вы можете сказать «большой вопрос о том, почему IE7 (работающий на XP) действует иначе, чем IE7 (работающий на IE9), даже не был затронут. «? Несколько человек пытались объяснить, что запуск IE9 в режиме IE7 — это НЕ то же самое, что запуск IE7… это две разные программы! Что именно вы здесь ищете?
Ответ №4:
Загрузите бесплатный Microsoft Virtual PC и бесплатные образы жестких дисков MS, содержащие IE 7, 8 и т.д. … вот почему они делают их доступными.
Кажется, существует миллион плагинов для слайд-шоу jQuery, и большинство из них совместимы с IE 7.
jCarousel — это один из них, и вы можете изменить его с помощью CSS, чтобы он выглядел так, как у вас есть сейчас.
Эта страница содержит 42 различных плагина для слайд-шоу.
Редактировать:
Я также рекомендую привести страницу в соответствие W3C, прежде чем решать другие проблемы.
Комментарии:
1. @Kerrick- Похоже, вы опубликовали несколько не связанных вопросов в рамках одного. Отвечая на ваш первоначальный вопрос, как он называется, «Почему моя страница работает в режиме IE7 в IE9, но не в самом IE7?» ; Соответствует ли ваша страница стандартам соответствия ? И, как заявляли другие, запуск эмуляции браузера в браузере — это не то же самое, что запуск этого браузера изначально. В моем опубликованном ответе я предлагаю решение, которое позволяет запускать несколько версий IE изначально без необходимости использовать несколько разных компьютеров.
2. @Kerrick — Что касается ваших конкретных последующих вопросов, «проблема со слайд-шоу jQuery» и «почему ваш нижний колонтитул поврежден»… возможно, вы захотите опубликовать их в виде двух новых вопросов.
3. @Kerrick- Я прогнал вашу страницу через средство проверки W3C, и у нее есть несколько проблем. Было бы целесообразно позаботиться об этих проблемах соответствия, прежде чем устранять конкретные ошибки.
4. Просто обратите внимание на «Истекает срок действия: это изображение завершит работу и станет полностью непригодным для использования 09 августа 2011 года». и подобные примечания 😉
5. Это правда. Вам придется загружать новые образы жесткого диска каждые несколько месяцев.
Ответ №5:
Могу ли я порекомендовать вам избегать подходов эмуляции и тестировать в реальном IE7 на вашем компьютере, используя режим XP.
Комментарии:
1. Хороший момент. Вы никогда не должны ничего предполагать и тестировать, тестировать, тестировать. Эмуляторы почти никогда не будут работать точно так же, как настоящие.
2. Да, я усвоил свой урок и теперь буду тестировать при фактической установке.
Ответ №6:
Первое: всегда проверяйте в реальном браузере. Если мы говорим об ie, используйте виртуальную машину для его тестирования. Никогда не полагайтесь на «режимы совместимости», «ies4linux», «ies4mac», «просто используйте wine» и тому подобное. У меня было много, но ОЧЕНЬ МНОГО головной боли, когда не использовались виртуальные машины (вы можете использовать моментальные снимки на своих виртуальных машинах — каждый снимок является версией браузера. Таким образом, у вас может быть только одно изображение, но с несколькими браузерами).
Вторая: возникает ли эта проблема, даже если вы удалите этот раздел слайд-шоу из своего script.js ? Вы проверяли, после удаления этого раздела и перезагрузки вашей страницы, не является ли она кэшированной версией старой script.js ? Иногда источником всех проблем является кэшированная версия.
Небольшой взлом, чтобы обмануть ваш браузер и заставить его не кэшировать script.js заключается в добавлении при вызове script.js из вашей разметки, произвольное число (script.js?v = 100, например, и для каждой модификации, которую вы делаете с вашим js, вы изменяете это число. Вы можете проверить исходный код SO, он использует аналогичный подход в некоторых разделах).
Третье: попробуйте сделать до «отрицания» в вашем скрипте:
alert($.browser.msie);
alert($.browser.version);
alert($.browser.msie amp;amp; $.browser.version <= 7.0);
… и посмотрите, предупреждает ли ie о чем-либо или вызывает исключение. Иногда ie попытается интерпретировать ваш javascript и без всякой причины вызовет неизвестное исключение: если вы не поймаете его в блоке try / catch, все сломается с этого момента и до конца сценария.
Я знаю, это метод проб и ошибок, но мы должны изолировать все и попытаться точно понять, что вызывает ошибку. При необходимости повторите третий совет в разделе слайд-шоу.
Ответ №7:
В общем, возможно, это тот ответ, который вы ищете. Перейдите в F12 инструменты разработчика и выберите Режим браузера IE9 и режим документа IE7 Это будут стандарты IE7, но пользовательский агент IE9. Если это не сработает, попробуйте использовать режим браузера IE7 и режим документа.
Ответ №8:
Я согласен с другими в том, что возможным виновником является слайд-шоу. Я бы получил более удобное для CSS слайд-шоу:
http://flowplayer.org/tools/index.html
И обязательно протестируйте в РЕАЛЬНОМ браузере! Вы могли бы использовать сайт проверки онлайн-браузера, такой как browsershots.org. Им требуется время, чтобы создать снимок вашего сайта, но он точный.
Комментарии:
1. Я не согласен. jQuery Tools очень устарел, плохо поддерживается и переворачивает слоган jQuery «меньше пиши, больше делай» с ног на голову. И я нашел скриншоты на browsershots.org отсутствует, поскольку вы фактически не можете использовать свой сайт. Загрузите бесплатный Microsoft Virtual PC и бесплатные образы жестких дисков MS, содержащие IE 7, 8 и т.д. … вот почему они делают их доступными.
2. Я бы вряд ли использовал MS anything в качестве ценного инструмента. Я нахожу использование browsershots менее обременительным и более надежным, чем накладные расходы на использование виртуального ПК. Как вы думаете, сможете ли вы воспроизвести за одинаковое время все снимки браузера из всех разных сборок IE 7, 8 и 9 в этих образах жесткого диска? Browsershots работает, и это также бесплатно. В качестве примера я использовал инструменты jQuery; есть много других, которые могут лучше поддерживаться и лучше работать с IE. Я использовал инструменты jQuery с IE7 и IE8, и это отлично работает. Я хотел бы знать, что все используют, когда не могут настроить виртуальный компьютер.
3. Снимки из браузера — это просто снимок экрана … вряд ли это сравнимо с фактическим использованием и тестированием страницы. Мне тоже не нравится MS, но если 50% моих посетителей все еще используют Explorer, тогда я должен его протестировать. VPC с образом жесткого диска XP под управлением IE 7, поставляемый Microsoft, — это единственное , что точно совпадает с использованием IE 7 в XP.
4. Я не уверен, почему вы не можете настроить VPC, требования не такие строгие. Я запускаю ее на компьютере XP 5-летней давности. Существует несколько «браузеров», которые утверждают, что эмулируют любую версию IE, но они также вносят свои собственные ошибки и проблемы, не замеченные в реальном Internet Explorer. Итак, если вы не можете фактически запустить его на определенной версии Explorer, VPC или реальной машине, то вы фактически не сможете протестировать свой сайт в этой версии Explorer. Придерживайтесь стандартов W3, избегайте распространенных ошибок IE и просто надейтесь, что это сработает.
5. Невозможность увидеть отрисованный код в моментальном снимке должна быть наименьшей из ваших забот. Как насчет невозможности навести курсор, щелкнуть, ввести, прокрутить, выбрать, отправить, всплывающие подсказки, посмотреть анимацию, протестировать модальности, заполнить формы или взаимодействовать со страницей так, как это сделал бы любой реальный посетитель?