Различия в Firefox и Internet Explorer

Question

Этот вопрос связан с тем, что я только что узнал, что мой сайт выглядит нормально в IE7 и IE8 с режимом совместимости, но в FF все облажалось.

Какой лучший способ это сделать.

Отдельные файлы CSS?

Спасибо, Ричард

Answer 1

Если ваши макеты радикально отличаются, лучшим решением было бы вернуться и переосмыслить свой макет / CSS. Честно говоря, мне никогда не нужны были две таблицы стилей - одна для FF, а другая для IE.

Одним из очень полезных инструментов является «таблица стилей сброса», например , которую предоставляет Эрик Мейер . Это сбрасывает большую часть ваших элементов в состояние, совместимое между несколькими браузерами.

Продуманное и терпеливое развитие может привести к единой таблице стилей (упрощенной здесь, без учета reset.css, text.css и т. Д.), Которая будет работать и для FF, и для IE.

Я бы посоветовал вам скачать Firebug, аддон Firefox , и начать работать со своими стилями. Будет полезно установить IE Developer Toolbar - вроде Firebug из IE. И если вы хотите протестировать несколько версий IE одновременно, посмотрите IETester .

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

Answer 2

Многие кросс-браузерные проблемы сводятся к следующему: вы ничего не указали, а разные браузеры делают разные предположения. Поэтому:

Объявите действительный тип документа

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

По моему опыту, "строгий" тип документа позволяет IE вести себя лучше (включает такие вещи, как CSS: наведение курсора на div в IE7).

Эта статья дает хорошее представление о типах документов.

Проверка вашего HTML и CSS

Вам не нужно делать все идеально, но проверка - это хорошая обратная связь. Как сказал Джефф :

Знание правил и границ помогает вам определить, что вы делаете, и дает вам законные боеприпасы для согласия или несогласия. Вы можете сделать осознанный выбор вместо случайного «я просто делаю, и это работает».

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

Рассмотрим сброс CSS

Различные браузеры предполагают разные базовые правила CSS. Вы можете помочь им всем действовать одинаково, явно сгладив различия. Эрик Мейер, который написал CSS: полное руководство , использует этот сброс .

Тестирование в нескольких браузерах, работа с IE последняя

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

Quirksmode.com - хорошее место для поиска случайных отличий браузера.

Answer 3

Сначала запустите ваш css через css validator . Это поможет вам убедиться, что ваш CSS совместим со стандартами, поддерживающими браузеры, примите любые рекомендации, которые он дает вам, чтобы улучшить ваш CSS. Как только вы пройдете валидатор css, вы сможете увидеть, есть ли какие-либо специфичные для браузера ошибки.

Answer 4

Ради любви к Богу (и вашей волосной линии) сначала развивайтесь в FF / Webkit, а затем вносите изменения, чтобы заставить его работать в семействе IE.

При необходимости я предпочитаю хаки в документе CSS (* html .foo) условным комментариям, потому что мысль о вставке конкретной разметки MS в мой HTML вызывает у меня тошноту.

Answer 5

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

Я часто сталкиваюсь с этим при центрировании объектов. Совсем недавно у меня возникли проблемы с таблицей для веб-портала. Погуглив «центрирующий стол css», мы получили центрирование таблицы с использованием html или css Используя этот же подход, вы сможете выяснить, как устранить расхождения в браузере.

Answer 6

Отдельные файлы только для определенных частей браузера. И используйте html условные операторы для переключения между ними.

<link type="text/css" href="style.css" />
<!--[If IE]>
    <link type="text/css" href="IEHacks.css" />
<![endif]-->
<!--[if !IE]>
    <link type="text/css" href="NonIEHacks.css" />
<!--<![endif]-->

Статья MSDN об условных комментариях, включая список принятых тестовых значений

Answer 7

Очистка всех стилей и превращение каждого браузера в чистый лист идеален и должен быть сделан, но кодирование для каждого отдельного браузера просто невозможно. Вы не можете создать веб-сайт с CSS, который будет выглядеть на 100% одинаково в каждом браузере, если вы не закодируете все на пиксельной основе, и даже тогда у вас возникнут проблемы, основанные на интерпретации IE отступов и полей. Пиксель не всегда пиксель.

Тем не менее, мое решение, как реализации CSS с самого начала, состоит в том, чтобы сначала очистить все отступы и поля, которые вызывают большинство проблем, в вашем основном файле CSS.

* { padding: 0; margin: 0; }

Затем создайте свой сайт, как обычно - в идеале изначально для Firefox, так как есть хаки, которые вы можете использовать для Safari и всех версий IE. В зависимости от «рендеринга как IE _» это недопустимо. Проверьте свой сайт в IE 6, 7, 8 (используйте IE Tester, если необходимо), Firefox и Safari одновременно. Постарайтесь внести как можно больше мелких изменений, чтобы все они выглядели очень похожими. Затем войдите и решите оставшиеся незначительные проблемы (на данный момент у вас может быть только один или два на браузер - если таковые имеются).

<!--[if IE 6]><link href="css/CSSName_IE6.css" rel="stylesheet" type="text/css"><![endif]-->
<!--[if IE 7]><link href="css/CSSName_IE7.css" rel="stylesheet" type="text/css"><![endif]-->
<!--[if IE 8]><link href="css/CSSName_IE8.css" rel="stylesheet" type="text/css"><![endif]-->

После того как вы создали свою основную таблицу стилей со всеми стилями для всего сайта, создайте условные комментарии для отдельных таблиц стилей для IE 6, 7 и 8, в которых вы переопределяете только те атрибуты, которые необходимо переопределить.

например. Если вам нужно отрегулировать размер шрифта от обычного .8 em для Firefox до .7 em для IE 6, но ваш конкретный селектор имеет 12 других атрибутов, поместите только этот единственный переопределенный атрибут в условную таблицу стилей. Не перезаписывайте весь стиль всеми атрибутами. Это не нужно.

Мастер CSS

.iframestyle { float: left; margin-right: 3px; width: 305px; }

IE 6

.iframestyle { width: 309px; height: 263px; }

IE 7

.iframestyle { width: 309px; margin-top: 0px; }

IE 8

.iframestyle { width: 305px; margin-top: 0px; }

Надеюсь, это поможет лучше показать, что я имею в виду (и да, в IE 8 ширину нужно было указывать снова, так как по какой-то причине он выбирал другие стили IE).

Answer 8

Для достижения наилучших результатов займитесь разработкой в ​​Firefox (поскольку она соответствует стандартам) и периодически проверяйте браузер в разных версиях IE, чтобы убедиться, что он тоже работает нормально.

Вам не нужно иметь полностью отдельный файл CSS для IE, но в сложной компоновке вам может понадобиться небольшой набор переопределяющих правил, чтобы заставить IE вести себя - открывайте эти правила для IE только с IE Условные комментарии . Никогда не используйте CSS-хаки, они не нужны и подвержены ошибкам.