Как вы работаете с 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 также использует его.
Ответы
Ответ 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]-->
Ответ 8
С IE получает около 65% трафика, я не думаю, что вы можете думать об этом как о задумчивости.
Ответ 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 и просто признаю тот факт, что веб-сайт может выглядеть по-разному в разных браузерах.