Firefox против IE против Chrome против Safari

Практически невозможно заставить сайт выглядеть одинаково во всех браузерах и платформах. Причина номер один в том, что шрифты по-разному отображаются в Windows, Mac, Linux, Solaris и т. д.

Мы придерживаемся новой мысли: веб-сайты не обязательно должны выглядеть одинаково в разных браузерах и на разных платформах. Вы можете легко пройти 96-98% пути. Остальное потребует от вас чрезмерных усилий для потенциальной выгоды.

Начинаем разработку под Firefox. Если мы все правильно поняли, остальные браузеры очень близки. В большинстве случаев с IE очень сложно работать правильно. Я рекомендую вам сказать своему клиенту или себе, что IE 6 больше не является обязательным требованием.

Убедитесь, что вы начали с правильной ноги, используя таблицу стилей css «сброса», которая объединяет все выходные данные браузера. Выезд: http://developer.yahoo.com/yui/reset/

Наконец, избавьтесь от некоторых проблем и стандартизируйте библиотеку Javascript, такую ​​как ExtJS, JQuery или Prototype, которая скроет различия браузера и позволит вам сосредоточиться на коде вашего проекта.

Многим разработчикам нравится начинать тестирование с FireFox и переходить на IE7. Таким образом, у них есть оба самых популярных браузера.

Я предпочитаю начинать с IE7, чем переходить к FireFox, потому что в Firefox есть FireBug, который позволяет мне увидеть, что не так, и внести исправления. Но я должен сказать, что я медленно перехожу к тестированию с помощью FireFox fist, поскольку он больше соблюдает все правила. (Кстати, FireBug доступен в Javascript для IE, так что это здорово).

Конечно, вы должны видеть, кто ваша публика. Если он используется внутри компании, и они используют только IE ... выбор прост. Если это больше для разработчика, у вас будет больше пользователей, которые будут использовать FireFox ... вы можете сначала протестировать, в зависимости от вашей аудитории.

Но не пытайтесь сделать так, чтобы он выглядел идеально во всех браузерах, вы зря потратите время. Просто убедитесь, что все в порядке и все действия javascript выполнены правильно.

Не пытайтесь сделать так, чтобы каждый браузер отображал его с точностью до пикселя, как и другие ... только вы будете знать! Просто постарайтесь, чтобы он хорошо смотрелся в каждом браузере.

Использование строгого типа документа, правильного xhtml / html и правильного CSS - хорошая отправная точка. Также убедитесь, что вы используете reset / undo.css.

Несмотря на все это, уловы будут, но очень мало.

• Вы никогда не достигнете совершенства, иди как можно лучше.

• Обычно лучше всего использовать подмножества CSS, которые работают во всех браузеры вместо конкретных браузеров хаки.

• Для javascript обязательно используйте фреймворк javascript (JQuery / Опытный образец / Юй / Ext / и т. д.) И использовать его исключительно для дома ссылки / манипуляции. Трудно сделать все правильно, и они уже проделали за вас большую часть работы.

• Хорошо справочный сайт

Я бы посоветовал определить вашу целевую аудиторию, а затем определить, какой браузер они используют. Как только вы это сделаете, стремитесь к совершенству в этом браузере. Теперь вы можете немного поработать и улучшить его внешний вид в других браузерах.

Сегодня стремление к совершенству во всех браузерах похоже на просьбу о мире во всем мире.

Другой подход, который вы можете предпринять, - это использовать фреймворк Javascript, например jQuery, чтобы облегчить боль.

Разработайте для Firefox. Затем примените исправления для IE. Надеюсь, он будет нормально отображаться в Chrome и Safari.

Причина в том, что есть исправления, позволяющие заставить IE работать «должным образом», но не так много, чтобы Firefox вел себя плохо.

Да, еще купите копию Превосходя CSS.

• Убедитесь, что ваш XHTML и CSS проверены.
• Используйте только стандартный Javascript.
• Протестируйте в одном из основных (не IE) браузеров: я бы предложил Firefox или Chrome.
• Ваш сайт теперь должен выглядеть очень близко в основных (не IE) браузерах.
• Протестируйте что-то вроде дилло или рыси (или обоих)
• Наконец, начните делать хаки, чтобы IE работал

Я обнаружил, что использование большего количества CSS вместо таблиц позволяет сделать его одинаковым во всех браузерах. Это все еще немного сложно, но логика раскладки стола хуже. Экономно используйте таблицы.

Да, и сделать вещи "эластичными" всегда проблема. Фиксировать ширину / высоту намного проще.

Вот ответ, который я дал некоторое время назад о совершенствовании веб-сайтов в браузерах (от здесь)

Собственно, что вам нужно использовать при разработке веб-приложения:

• Fire Fox
• IE
• Сафари
• (Chrome скоро ...)

Я имею в виду, что вам следует тестируйте каждый шаг своего веб-сайта во всех трех основных браузерах Grade-A ... так что, если что-то не работает в процессе, вы будете точно знать, что вызвало сбой.

Если вы не будете регулярно проверять в браузерах, как выглядит ваша страница, впоследствии будет намного сложнее исправить проблемы.

Мой подход заключается в написании кода для Firefox, Opera и других браузеров, отличных от Microsoft. Как только это сработает, я исправляю функциональность IE в отдельном файле стилей / js.

Также я обычно использую JS-библиотеку и CSS-фреймворк. 9 раз из 10 я использую JQuery и YUI Grids.

Проверьте Browsershots. Он делает скриншоты ваших сайтов в различных браузерах, поэтому вы можете проверить это визуально. Это немного медленно, но у меня это сработало.

Разработайте стандарты, а затем добавьте исключения

В настоящее время наиболее популярным браузером, который в основном соответствует требованиям, является Firefox, поэтому разработка Firefox - это естественный первый шаг. Используйте валидаторы W3C, чтобы убедиться, что вы на правильном пути. После того, как ваша страница в основном готова, убедитесь, что она по-прежнему хорошо выглядит в Safari и Chrome (также в обоих браузерах с высокой совместимостью, поэтому у вас не должно возникнуть особых проблем), затем начните исправлять ее для IE (оба 6 а также 7). И поверьте, это нужно будет исправить! Такие сайты, как QuirksMode, могут оказаться большим подспорьем, когда придет время добавлять исключения.

Всегда используйте HTML 4.01 Strict DOCTYPE

Это, вероятно, будет одним из наиболее спорных моментов, поскольку у XHTML есть много сторонников. К сожалению, невозможно обслуживать файлы XHTML способом, который одновременно является IE-совместимым и совместимым со стандартами - IE не распознает типы XHTML MIME и нарушает стандарт, чтобы обслуживать их как text/html. Только HTML 4.01 Strict DOCTYPE переводит все браузеры в (почти) стандартный режим, при этом соблюдая стандарты. Для получения дополнительной информации найдите DOCTYPE переключение. Если вы абсолютно не можете обойтись без написания страниц, которые представляют собой правильно сформированный XML, используйте Преобразование XSL для преобразования ваших страниц из выбранного вами варианта XML в HTML.

Не используйте "хаки" CSS

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

Не создавайте макеты с выравниванием по пикселям

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

Не используйте абсолютные размеры для шрифтов

Не все используют монитор того же размера, что и вы; вместо того, чтобы указывать сноску на font-size: 10px;, установите ее на font-size: smaller; или font-size: 80%;. Это большая проблема доступность.

Не полагайтесь на значения по умолчанию для свойств CSS

Вы никогда не знаете, все ли браузеры используют одно и то же значение по умолчанию. Таблица стилей "сброса" YUI - отличное место для начала.

Сначала я проверяю сайт в FF и т. д., А затем «ремонтирую» сайт, чтобы он выглядел нормально в IE. В большинстве случаев, если код проверен, чистый и простой, IE требует лишь нескольких небольших правок. Я использую разные таблицы стилей для IE, не рекомендую использовать хаки, для javascript используйте только одну библиотеку. И да, браузерные снимки очень помогают.

Используйте строгий doctype.

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

Если вы используете ASP.NET, вам следует добавить / изменить этот файл web.config.

<system.web>
    <xhtmlConformance mode = "Strict"/>

Вы также должны проверить css-совместимые адаптеры. http://www.asp.net/cssadapters/

Я потратил часы на то, чтобы мой Веб-сайт отображался одинаково во всех браузерах, и, похоже, это сработало. Последнее предложение. Проверяйте часто: не делайте слишком много, прежде чем проверять, чтобы все браузеры отображали его одинаково.

Используйте библиотеку JS, например ExtJS. Это абстрагирует специфичные для браузера аспекты стилизации.

Неправильно ли, что в разных браузерах он выглядит по-разному, если он разборчивый и чистый?

Используйте расширение CSSViewer для firefox, это может помочь увидеть некоторые исправления, которые вы можете сделать с кодом, очень удобным для пользователя. Используйте свойства CSS display: block или display: inline-block, они ооочень полезны. Margin, padding, height и width будут вашими друзьями, иногда вам нужно указать эти значения, чтобы увидеть то же самое во многих браузерах. Для шрифтов я бы порекомендовал вам прочитать yahoo yui fonts css.

Хорошо, лучший способ следовать - использовать библиотеки и заранее написанные коды. Например: никогда не используйте JavaScript, вместо этого используйте JQuery, потому что он совместим со всеми браузерами, и вместо написания собственной темы используйте бесплатные темы css.

Что ж, это работает для меня и помогает мне сэкономить массу времени. Потому что на профессиональном рынке время означает деньги.

Спасибо.

IE7 больше не является обязательным требованием. Теперь это ответственность с ее тревожной безопасностью. IE8 должен поддерживать большую часть того, что делают другие браузеры, а то, что нет, не имеет значения. Опыт будет ухудшаться, но если вы в первую очередь используете IE, у вас все равно нет вкуса.