Как Вы имеете дело с Internet Explorer?

У меня была такая же проблема в моем разработчике: IE6, FFetc + LAMP + custom MVC, основанный на статье Расмуса Лердорфа, когда он предлагал noMVC-подобный дескриптор, который он использует для заголовков, нижние колонтитулы и подобные. Я закодировал CSS, застрял с FF, который плохо его отображает. Мне пришлось пересмотреть свои знания CSS - я обнаружил, что одна реализация CSS может правильно отображаться в std. совместимый режим (FF) и IE6. Мне это понравилось. Я был доволен обработкой любых изменений с помощью одного файла CSS. Мой совет:

1. Я знаю, что у вас есть Mac, иди в гараж (газеты скажут, где они), купи старый ПК за 10 долларов (пока я нашел много). Это даст вам возможность протестировать IE6 на ранней стадии, пока вы работаете с ним, а также получите KVM-переключатель для доступа к машине, когда вам это нужно.
2. Одна из вещей, которые я ' Я пристрастился к настройке IE6 - Отключить все сценарии ActiveX - в любом случае делает просмотр веб-страниц без рекламы взрывом - протестируйте свое приложение с настройками ActiveX и без них и посмотрите, насколько хорошо работает ваш сайт. Это буквально сэкономило мне часы «болезненных» моментов, о которых я упоминал выше.
3. Вы наверняка знаете, как протестировать FF / Opera / Safari со сценариями и без них.
4. Наконец, независимо от того, насколько тяжелые сценарии Javascript использует ваш сайт, сделайте конечно, без сценария основные функции (которых, я уверен, у вас много) загружаются правильно.

Я не эксперт, но надеюсь, что мои комментарии вам немного помогут.

Cheery-O

As nosredna сказал, используйте действительный тип документа (см. http://www.alistapart.com/articles/doctype/ ) Затем проверьте свой веб-сайт с помощью валидатора w3c ( http://validator.w3.org/ ). Если ошибок нет (или их всего несколько), то IE должен отображать их правильно.

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

Я позволяю другим решать проблемы за меня. Я использую отличные файлы CSS Yahoo, включенные в их библиотеку YUI. У них есть один файл для удаления существующего форматирования для существующих меток (например, H1 в IE не выглядит как H1 в Firefox), у них есть другой, чтобы предоставить мне набор форматирования по умолчанию, который действительно выглядит одинаково во всех браузерах, у них есть еще один для стандартизации размеры шрифтов, и наиболее важным из них является их файл сетки. Это дает мне возможность очень быстро и легко создавать иерархическое форматирование регионов и субрегионов на странице, и я знаю, что он будет работать в любом крупном современном браузере (Yahoo чертовски тестирует, чтобы убедиться, что это так)

. ] Возможно, это не идеальное решение, но его более чем достаточно для моих нужд.

<script>
  if (internetExplorer) {
    window.location = "http://getfirefox.com";
 }
 </script>

Я знаю, что это может попасть в категорию «слишком мало, слишком поздно». Тем не менее, я бы инвестировал в VMWare или Parallels и создал виртуальную машину Windows с IE6.

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

Тем не менее, в существующем приложении я сначала должен был убедиться, что мой HTML-код действителен (в вашем распоряжении множество служб проверки), а затем, в зависимости от макета, я поэтапно пытался получить макет справа, используя комментарии, чтобы «скрыть» разделы, над которыми вы не активно работаете.

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

Сейчас мы подошли к тому моменту, когда большинству пользователей следовало полностью перейти с IE6. IE7 по-прежнему доставляет хлопоты, но далеко не так плохо, как 6. В моих проектах по умолчанию я продаю совместимость IE7 с кодом, который позволяет пользователям IE6 и ниже обновляться. Если клиент хочет, чтобы я включил совместимость с IE6 на сайт, я обычно увеличиваю указанную цену на 50% из-за того, насколько ужасной головной болью является поддержка браузера и сколько дополнительного визуального кода необходимо написать, чтобы он заработал.

Обычно я делаю все возможное, чтобы не создавать отдельный файл CSS. Существует множество трюков и советов по CSS и HTML, которые позволят вам заставить его работать в IE6 и выше, а также во всех других распространенных браузерах. Просто нужно время, чтобы во всем разобраться. К сожалению, иногда со сложными макетами это может занять много времени, особенно если вы не тестируете его на ходу.

Удаляю

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

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

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

Поскольку IE получает около 65% трафика , я не думаю, что вы можете думать об этом как о запоздалой мысли.

Я думаю, что было бы нормально написать специальный файл css для IE. Я знаю, что это неприятно, но из-за некоторых возможных проблем IE6 выглядит иначе, чем все другие браузеры.

Используйте эту строку для своего недавно созданного файла css:

<!--[if ie6]><link rel="stylesheet" type="text/css" media="screen" href="ie6_style.css" /><![endif]--> 

Сначала прочтите При наличии макета , в котором объясняется, как механизм рендеринга IE работает внутри. Механизм рендеринга IE предшествует CSS. Он не делает различий между встроенными и блочными элементами, как вы ожидаете. Вместо этого в IE элемент hasLayout. Или не. Это источник 99% ошибок IE CSS. Итак, прочтите эту статью пару раз.

Что касается исправлений, я обычно использую условные комментарии. По нескольким причинам:

• Они надежны на будущее, в отличие от взломов CSS. Что, если IE9 исправит взлом, но не ошибку, которую вы используете для решения?
• Это допустимый (X) HTML (условные комментарии - это просто комментарии для всех остальных)
• Не требует javascript. Вы будете удивлены, сколько людей отключили javascript.

Одно замечание об условных комментариях: Никогда не используйте спички с открытым концом. То есть никогда не делайте чего-то вроде:

<!--[if IE]> <load css> <![endif]-->
<!--[if gte IE 7]> <load css> <![endif]-->

Причина та же, что и у взлома: сделайте это надежным в будущем. Что, если следующая версия IE исправит ошибку, и вам больше не нужны исправления? Или, что еще хуже, "исправление" теперь действительно портит ваш макет в новой версии IE? Обычно лучше предполагать, что в следующей версии IE исправлена ​​ошибка, над которой вы работаете. Я немного писал об этом, когда IE 8 был на горизонте.

Обычно лучше всего предполагать, что в следующей версии IE исправлена ​​ошибка, над которой вы работаете. Я немного писал об этом, когда IE 8 был на горизонте.

Обычно лучше всего предполагать, что в следующей версии IE исправлена ​​ошибка, над которой вы работаете. Я немного писал об этом, когда IE 8 был на горизонте.

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

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

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

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

Вот как я пытаюсь уменьшить боль при работе с IE:

1. Используйте reset.css - Yahoo! YUI Reset или Эрик Мейер Reset CSS
2. Будьте осторожны с плавающими и очищающими элементами - они обычно вызывают много ругательств.
3. Помните об ошибках hasLayout в IE, обычно добавляющих масштаб: 1 или высоту атрибуты помогают исправить это. Прочтите При наличии макета .
4. Заставьте макет работать в Firefox, Safari, Chrome и т. Д., Сохраняя при этом IE примерно на 80%.
5. Реализуйте стиль IE6.css и IE7. css, если необходимо, используя условные комментарии.
6. Пиво, спиртные напитки или другие напитки для взрослых.

Перезагрузка браузера для запуска. Как можно больше выровняйте игровое поле и покончите с настройками браузера по умолчанию. Создайте свой CSS с нуля. (См .: http://meyerweb.com/eric/gotits/2007/04/12/reset-styles/ )

Тестируйте рано и часто во всех основных браузерах во время разработки.

Попробуйте чтобы добиться как можно большего без специальных хаков для браузера. Иногда вам нужно работать в каком-либо CSS для конкретного браузера, но он должен проверяться (используйте инструмент W3C Validation). Иногда, хотя для этого нет ничего, кроме условного (и, возможно, даже некоторого JavaScript), например, исправление прозрачных PNG в IE6 (см .: http://nettuts.com/videos/screencasts/5-easy-ways-to -tackle-ie6s-transparent-issues / ).

Если вы не можете запустить IE на одной из машин разработки, попробуйте http: //browsershots.org. По крайней мере, вы можете получить обратную связь таким образом.

Используйте debug.css, который выделяет или выделяет div и другие элементы. При необходимости вставьте это в HTML-код во время разработки. Это может быть огромным подспорьем.

Используйте «панели инструментов разработчика» там, где они доступны (IE, Firefox).

ОЖИДАЙТЕ, ЧТО IE БУДЕТ БОЛЬНЫМ, и ПРОВЕРЬТЕ через 6, 7 и 8.

Удачи !

Условные комментарии.

<!--[if IE 6]>
  <link rel="stylesheet" href="ie6.css">
<![endif]-->
<!--[if IE 7]>
  <link rel="stylesheet" href="ie7.css">
<![endif]-->
<!--[if IE 8]>
  <link rel="stylesheet" href="ie8.css">
<![endif]-->
<!--[if !IE]-->
  <link rel="stylesheet" href="normal.css">
<!--[endif]-->

В файлах IE вы можете использовать @import для импорта normal.css , а затем переопределить стили как необходимо.

В крайнем случае, когда настройка CSS ничего не исправит, я хотел бы использовать сценарий CSS-селектора Рафаэля Лимы. Хотя это зависит от JavaScript (большинство сайтов, которые я создаю, так и есть), он предоставляет удобный способ настройки CSS для разных браузеров и версий без отдельных таблиц стилей.

Вы можете:

.someClass {
  margin-left:1px
}

.ie6.someclass {
  margin-left:2px
}