Подтвердить что ты не робот

Как вы работаете с Internet Explorer?

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


Моя проблема:

Я разрабатываю веб-приложение, полностью основанное на Javascript. Я пользователь Mac. Я был очень рад, что все отлично поработало в Safari, Firefox и Opera. Затем я попросил друга с Windows проверить его с помощью Internet Explorer, и все не работает. Мое приложение очень чувствительно к стандартам HTML.

Основная проблема заключается в макете CSS. Сам JavaScript, похоже, работает правильно благодаря jQuery для переносимости.


Мой вопрос:

Как вы работаете с Internet Explorer? Должен ли я создать новый CSS, который загружается только в Internet Explorer? Должен ли я создавать новую версию приложения только для Internet Explorer? Как вы обычно справляетесь с этим? Приложение довольно большое как в дизайне объектов, так и в дизайне макета.


Edit:

Используя CSS reset, как предложил Носредна, уже устранена почти половина проблем. Я думаю, это действительно хорошая практика. Я заметил, что SO также использует его.

4b9b3361

Ответ 1

Вы указываете действительный doctype? Вы можете заставить Internet Explorer быть более совместимым, переключив его в стандартный режим. http://msdn.microsoft.com/en-us/library/bb250395.aspx#cssenhancements_topic2

Используете ли вы файл CSS reset CSS? Это может помочь свести версии вместе. http://meyerweb.com/eric/tools/css/reset/

Помните об ошибках IE CSS: http://www.positioniseverything.net/explorer.html

Для скелета вашего макета рассмотрите использование разметки, которая, как известно, работает, например http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts или http://960.gs/ для жидких или фиксированных макетов соответственно.

Следите за различиями JavaScript между браузерами. jQuery обрабатывает некоторые из них, но не все из них. http://www.impressivewebs.com/7-javascript-differences-between-firefox-ie/

Да, IE - это боль. Если вы хотите, чтобы он работал в IE, вы действительно хотите протестировать IE каждый пара дней. Вы не хотите, чтобы сохранить боль в конце - вы хотите обрабатывать кошмары по одному за раз.


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

Ответ 2

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

<!--[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, а затем при необходимости переопределить стили.

Ответ 3

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

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

Ответ 4

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

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

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

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

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

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

ОЖИДАЙТЕ, ЧТО ИИ НАМЕРЕНСЯ БЫТЬ БОЛИ И ИСПЫТАТЬ В 6, 7 и 8.

Удачи!

Ответ 5

Сначала прочитайте On Layout, в котором объясняется, как движок рендеринга 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 был на горизонте.

Ответ 6

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

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

Ответ 7

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

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

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

Ответ 9

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

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

Ответ 10

В крайнем случае, когда настройка CSS просто не будет исправлять, мне нравится использовать Rafael Lima CSS selector script, Хотя это зависит от JavaScript (большинство сайтов, которые я построил, все равно), он обеспечивает удобный способ настройки CSS для разных браузеров и версий без отдельных таблиц стилей.

У вас может быть:

.someClass {
  margin-left:1px
}

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

Ответ 11

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

Ответ 12

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

Ответ 13

Я удаляю его

Ответ 14

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

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

Ответ 15

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

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

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

Ответ 16

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

Ответ 17

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

Это может быть не идеальное решение, но для моих нужд это было более чем достаточно.

Ответ 18

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

  • Я знаю, что у вас есть Mac, продаю гараж (газеты расскажут вам, где они), получите старый компьютер за 10 долларов (до сих пор я нашел много). Это даст вам возможность проверить IE6 на раннем этапе, пока вы на нем получаете KVM-переключатель, а также для доступа к машине, когда вам нужно.
  • Одна из вещей, к которой я привык, - настройка IE6. Отключить все сценарии ActiveX - делает просмотр веб-страниц без рекламы взрывом, в любом случае - тестируйте свое приложение с настройками ActiveX и без него и посмотрите, насколько хорошо ваш сайт делает, Это буквально спасло меня часами "болезненных" моментов, которые люди выше меня упомянули ранее.
  • Вы очень хорошо знаете, как тестировать FF/Opera/Safari с помощью & without scripting
  • Наконец-то - независимо от того, насколько сильно Javascripting использует ваш сайт, убедитесь, что без особых навыков загрузки (я уверен, что у вас есть много) загрузка.

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

Радостный-О

Ответ 19

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

Ответ 20

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

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