Стратегия для исправления ошибок макета в IE6?
Каков наилучший способ устранения ошибки макета в IE6? Каковы наиболее распространенные ошибки или проблемы, на которые следует обратить внимание при попытке выяснить, почему ваша страница внезапно выглядит как закодированная ее обезьяна?
12 ответов
Перво наперво
Получите панель инструментов разработчика Internet Explorer. Это спасатель жизни и прекрасно работает с IE6 и / или IE7. Это не замена панели инструментов веб-разработчика или Firebug для Firefox, но это лучше, чем ничего.
Знай своего врага
Читайте о причудах IE - особенно hasLayout и overflow и тому подобное. Есть также много тонкостей CSS, без которых вам придется обойтись или найти альтернативы. Посмотрите, сколько популярных JavaScript инструментов/ каркасов/ библиотек решают различные проблемы.
Рим не был построен за один день
Чем больше вам придется работать с ним, тем больше вы будете помнить от руки, и вам не придется часто искать. Там просто нет замены для опыта в этом. Однако, как отмечают некоторые, в сети есть большие ресурсы. Положение - это, конечно, все наверху.
http://www.positioniseverything.net/, безусловно, решит вашу проблему.
Он предоставляет исчерпывающее и подробное описание ошибок браузера, а также варианты обхода их. Должен читать, по моему мнению,
Хороший способ начать изучение того, как IE работает с страницей, - включить красные границы на разных элементах с помощью CSS (border: 1px solid red;). Это сразу скажет вам, является ли это проблемой на полях или заполнением, насколько широким является элемент и т. Д.
Модель коробки обычно является виновником. По сути, это означает, что любой div, который вы пытаетесь позиционировать и использовать неподдерживаемый CSS, вызовет эту проблему.
Это может произойти, если вы используете min-{width,height} или max-{width,height}.
это обеспечивает отличную ссылку для проверки совместимости с различными версиями.
Заметил, что пост Марка на -2 =D. Он говорит только "прибегнуть к таблицам", даже если они дуют, потому что в дурацких браузерах, таких как IE6, некоторые сломанные команды CSS работают только в таблицах (кто знает, почему... черт возьми, Билл Гейтс!!!). Вот хороший справочник, чтобы увидеть, что работает и не работает, насколько CSS. http://www.quirksmode.org/css/contents.html. Это отличный справочник, чтобы проверить, какие классные эффекты работают / не работают с различными широко используемыми браузерами. Кроме того, всегда имейте план действий для пользователей, которые используют браузер IE6 (хотя он почти так же стар, как механическая грязь), так как многие компании все еще используют старые браузеры (включая некоммерческие / страны третьего мира и т. Д.) создайте выпадающее меню с ошибками, которое выглядит ПУТЬ лучше, чем стандартное горизонтальное меню, но создайте вторичное, специально для IE6, которое становится значением по умолчанию, когда страница получает запрос от браузера IE6.
Распространенной проблемой является заполнение, не добавляемое к ширине элемента блока. Так что для макетов div, избегайте использования padding и вместо этого используйте элементы внутри них для определения заполнения.
Этот вопрос, я считаю, имеет слишком большой размах.
Подтвердите ваш код, и если боль не исчезнет, удачи.
Единственные реальные решения, как и в случае с любым другим типом ошибки, - это поиск решения в Google или попросить кого-то, кто знает (то есть: дать нам точную проблему здесь, в stackru).
Вы можете использовать панель инструментов IE Dev, чтобы подобрать идею, но многие ошибки являются случайными, необъяснимыми и эзотерическими. IE: ошибка гильотины, ошибка дублирования случайных предметов и т. Д., Список можно продолжать, и вы можете буквально тратить часы, буквально бездельничая с глупыми переменными везде и ничего не добившись.
Я использую Селектор браузеров Рафеля Лимы, когда мне нужно настроить различия между браузерами IE/Standards. Это значительно уменьшает использование "хаков" в вашем HTML для решения типичных проблем.
Вы можете настроить таргетинг на операторы CSS для разных браузеров или даже для разных версий браузеров (Hello IE 6). Это очень просто реализовать, но требует, чтобы у пользователя был включен JavaScript (большинство так и делают).
.вещь {....}
.ie.thing {....}
.ie6.thing {....}
Как вы определяете ошибку макета? самая разочаровывающая реализация макета (я не знаю, следует ли это определять как ошибку) в IE, мы должны всегда указывать style="display:inline" в теге HTML
У меня есть простая стратегия, которая работает каждый раз.
Во-первых, я разрабатываю сайт с использованием общепринятого CSS, чтобы хорошо выглядеть в Safari и Firefox 3. Подробную информацию о поддержке браузеров смотрите на сайте http://www.w3schools.com/css.
Затем я вхожу в IE6 и IE7 и изменяю CSS с помощью условных включений.
Это бесплатно и позволяет работать с различными браузерами (IE6 и IE7 имеют отдельные проблемы).
Большинство проблем, которые вы обнаружите, связаны с неподдерживаемыми функциями в IE (например, min-width), ошибками в блочной модели (IE добавляет невидимые дополнительные отступы (3 пикселя) в некоторые блоки) или проблемами с позиционированием. Пойдите для тех сначала, поскольку они - часто проблема.
У нас была плавающая проблема с div, которая была очевидна только в конкретной версии IE6. Это было исправлено путем загрузки последней версии пакета обновления.
Теоретически, используйте CSS, совместимый с ошибками компоновки IE6, используйте только хорошо известные обходные пути (фильтры CSS и HTML) и используйте для них код таким образом, чтобы не нарушать совместимость, тестируйте на причуды / строгий режим.
На самом деле прибегают к столам.