Как я могу проверить свою веб-страницу, используя разные браузеры?

Question

Я только что узнал об инструменте / файле Yahoo UI Reset CSS и использую его на своем веб-сайте. На моей машине установлен Internet Explorer 7 и Firefox 3.01, и моя веб-страница выглядит одинаково в этих двух браузерах. Друг использует Internet Explorer 6, и страница полностью запутана. У меня два вопроса:

1. Я так беден / глуп в написании CSS?
2. Как я могу проверить свою веб-страницу, используя различные браузеры на моей машине?

Answer 1

То, что ваш веб-сайт выглядит ужасно в 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

На самом деле не существует простого способа запустить несколько версий Google Chrome на одном компьютере. Установки Chrome зависят от учетной записи пользователя, и стали доступны автономные версии Chrome (см. вопрос 3785991 ), поэтому вы можете создать новую учетную запись пользователя Windows / Mac для каждой старой версии Chrome, которую вы хотите протестировать. .

Тем не менее, тот факт, что обновления применяются автоматически и тихо, означает, что вам действительно не нужно сильно беспокоиться о разработке своего сайта для старых версий Chrome. Если это неприемлемо, вам нужно будет использовать несколько учетных записей пользователей или виртуальные образы, как было рекомендовано ранее для Internet Explorer.

Apple Safari

Safari похож на Google Chrome в том, что не существует простого способа запустить несколько версий на одном компьютере. У Мишеля Фортина есть статья, в которой рассказывается, как запустить несколько версий на Mac OS X . Вы можете обратиться к этому вопросу о переполнении стека , чтобы узнать, как работает Windows. Виртуальные образы, опять же, кажется, единственный путь.

Opera

Вы можете установить более старые версии Opera без проблем, если они установлены в разных каталогах.

Answer 2

Если вы не особенно тестируете на вашей машине, вы можете попробовать http://browsershots.org. Это бесплатно и предоставляет скриншоты вашего сайта в различных браузерах на Linux / Windows / Mac OS / BSD.

Answer 3

Сброс CSS, примером которого является YUI, является попытка устранить различия браузеров в свойствах CSS по умолчанию для элементов HTML, так как в некоторых браузерах по умолчанию добавляется 8-пиксельный отступ для элемента html (для меня было неожиданностью обнаружить, что элемент html был даже стилизован, когда я впервые узнал).

Ваши проблемы с IE6 полностью отделены от этого. Без примеров самого сайта невозможно сказать, почему это может быть, но очевидное предположение состоит в том, что вы полагаетесь на достаточно продвинутые функции CSS (например, селекторы a> b,: указатель мыши не на якорях, определенные схемы позиционирования и т. Д.) .

Answer 4

Для IE вы можете использовать этот инструмент (Multiple IE) для проверки вашего сайта в старых версиях.

Для сброса CSS я перенаправлю вас на этот вопрос.

Answer 5

Для тестирования различных версий IE я использую ietester

Позволяет разные, т.е. версии на каждой вкладке браузера, и это бесплатно.

Answer 6

Google Chrome На самом деле не существует простого способа запустить несколько версий Google Chrome на одном компьютере

Не правда. Вы можете иметь разные версии Chrome в разных учетных записях пользователей.

Answer 7

Цель этого в том, что HTML (правка: браузеры имеют предопределенные свойства для elements.ty Zack) имеет некоторые предопределенные свойства для своих элементов, такие как встроенный отступ / поле для элемента абзаца. Смысл использования шпаргалки сброса состоит в том, чтобы начать со значений по умолчанию, которые равны для всех элементов: размер, поля, отступы и т. Д. Я использую файл сброса в моем проекте, но не в его первоначальном виде. Вы должны решить, какие элементы на листе использовать, и вы всегда можете назначить там другие значения по умолчанию для тегов.

---

edit: Вы можете проверить свою веб-страницу, установив большинство доступных браузеров. Здесь - последняя статистика использования браузеров. Я советую использовать Mozilla в качестве первого браузера для тестирования и время от времени тестировать страницу в других браузерах: IE6, IE7, IE8, Opera, Chrome и Safari (по крайней мере). Вот ссылка на обсуждение нескольких IE на одном ПК. Желаем удачи!