Как я могу проверить свою веб-страницу, используя разные браузеры?
Я только что узнал об инструменте / файле CSS Reset Yahoo UI и использую его на своем веб-сайте. На моей машине установлен Internet Explorer 7 и Firefox 3.01, и моя веб-страница выглядит одинаково в этих двух браузерах. Друг использует Internet Explorer 6, и страница полностью запутана. У меня есть два вопроса:
- Я настолько беден / глуп в написании CSS?
- Как я могу проверить свою веб-страницу, используя различные браузеры на моем компьютере?
7 ответов
Если вы не особенно интересуетесь тестированием на своем компьютере, вы можете попробовать http://browsershots.org/. Это бесплатно и предоставляет скриншоты вашего сайта в различных браузерах на Linux/Windows/Mac OS/BSD.
То, что ваш веб-сайт выглядит ужасно в Internet Explorer 6 , не означает, что вы ужасны в CSS. В движке рендеринга Internet Explorer есть несколько задокументированных ошибок в отношении CSS. Веб-дизайнеры и разработчики боролись с этими ошибками в течение многих лет. Несколько известных сайтов, таких как Digg и YouTube, больше не будут поддерживать IE6.
У вас есть несколько вариантов для тестирования вашего сайта в нескольких браузерах. Самый простой способ - установить все браузеры, с которыми вы хотите протестировать, на локальный компьютер. Существует 5 основных браузеров, и все они требуют разных методов для установки нескольких версий.
Microsoft Internet Explorer
Если вы используете Windows XP, вы можете использовать несколько IE для установки Internet Explorer версий 3, 4.01, 5, 5.5 и 6.
Если вы используете Windows Vista или Windows 7 (или Windows XP в этом отношении), вы можете загрузить образы виртуальных машин от Microsoft, которые содержат полностью лицензированную операционную систему Windows с Internet Explorer. Срок действия этих образов виртуальных машин составляет от 90 до 120 дней. Они предлагают следующие изображения:
- Windows XP SP3 с IE6
- Windows XP SP3 с IE7
- Windows XP SP3 с IE8
- Windows Vista с IE7
- Windows Vista с IE8
Эти изображения могут быть использованы с бесплатным Virtual PC 2007.
Mozilla Firefox
Вы можете установить несколько версий Firefox в одной и той же операционной системе, но настоятельно рекомендуется создать новый профиль для каждой версии, которую вы собираетесь установить. Вы можете использовать шаги, описанные в блоге Роба Черного, чтобы настроить это (статья ссылается на Firefox 2, но он работает и для Firefox 3 и 3.5). Кроме того, вы можете использовать MultiFirefox.
Гугл Хром
На самом деле не существует простого способа запустить несколько версий Google Chrome на одном компьютере. Установки Chrome зависят от учетной записи пользователя, и стали доступны автономные версии Chrome (см. Вопрос 3785991), поэтому вы можете создать новую учетную запись пользователя Windows/Mac для каждой старой версии Chrome, которую вы хотите протестировать.
Тем не менее, тот факт, что обновления применяются автоматически и незаметно, означает, что вам не стоит сильно беспокоиться о разработке своего сайта для старых версий Chrome. Если это неприемлемо, вам потребуется использовать несколько учетных записей пользователей или виртуальные образы, как рекомендовано ранее для Internet Explorer.
Apple Safari
Safari похож на Google Chrome в том, что нет простого способа запустить несколько версий на одном компьютере. У Мишеля Фортина есть статья, в которой подробно рассказывается, как запустить несколько версий на Mac OS X. Вы можете обратиться к этому вопросу переполнения стека из- за низкого уровня в Windows. Виртуальные образы, опять же, кажется, единственный путь.
опера
Вы можете установить более старые версии Opera без проблем, если они установлены в разных каталогах.
CSS для сброса, примером которого является только YUI, направлен на устранение различий в браузере в свойствах CSS по умолчанию для элементов HTML, так как в некоторых браузерах по умолчанию используется 8-пиксельная заливка для элемента html (для меня было неожиданностью найти элемент HTML был даже стилизован, когда я впервые узнал).
Ваши проблемы IE6 полностью отделены от этого. Без примеров самого сайта невозможно сказать, почему это может быть, но очевидное предположение состоит в том, что вы полагаетесь на достаточно продвинутые функции CSS (например, селекторы a > b,: указатель мыши не на якорях, определенные схемы позиционирования и т. Д.),
Для IE вы можете использовать этот инструмент (Multiple IE) для тестирования вашего сайта в старых версиях.
Для сброса CSS я перенаправлю вас на этот вопрос.
Для тестирования различных версий IE я использую ietester
Это позволяет различные версии, т. Е. Версии на каждой вкладке браузера, и это бесплатно.
Google Chrome На самом деле не существует простого способа запустить несколько версий Google Chrome на одном компьютере.
Не правда. Вы можете иметь разные версии Chrome в разных учетных записях пользователей.
Цель этого состоит в том, что HTML(правка: браузеры имеют предопределенные свойства для elements.ty Zack) имеет некоторые предопределенные свойства для своих элементов, такие как встроенный отступ / поле для элемента абзаца. Смысл использования шпаргалки сброса состоит в том, чтобы начать со значений по умолчанию, которые равны для всех элементов: размера, поля, отступов и т. Д. Я использую файл сброса в своем проекте, но не в его первоначальном виде. Вы должны решить, какие элементы на листе использовать, и вы всегда можете назначить другие значения по умолчанию для тегов там.
редактировать: вы можете проверить свою веб-страницу, установив большинство доступных браузеров. Вот последняя статистика использования браузеров. Я советую использовать Mozilla в качестве первого браузера для тестирования и время от времени тестировать страницу в других браузерах: IE6, IE7, IE8, Opera, Chrome и Safari (по крайней мере). Вот ссылка на обсуждение нескольких IE на одном ПК. Удачи!