Перекрывание селектов в IE6


Оглавление (нажмите, чтобы открыть):

Определение IE6 через CSS селектор :: Хранитель заметок

Определение IE6 через CSS селектор

Определение версии браузера через переменную User-Agent не всегда работает правильно из-за того, что это значение легко подменить. Разработчики jQuery вообще решили отказаться от его использования, предложив как альтернативу определение особенностей браузера программно. Различные реализации одних и тех же свойств или отсутствие какой-либо реализации позволяет четко выделить Internet Explorer на фоне остальных. Но вот выделить какую-либо версию уже становится большой проблемой.

Следуя предложенной концепции выявления особенностей браузера, я решил использовать CSS селектор tag[class] для обнаружения IE6. В старших версиях IE, как и в других современных браузерах, этот селектор корректно обрабатывается, а в 6-й версии он игнорируется.

Во время своего выполнения функция добавляет необходимый стиль в тег head и проверяет их влияние на элемент. Результат проверки заносится в поле $.support.cssClassSelector.

Флаг хотелось установить еще до полной загрузки документа. По этому требовалось свести к минимуму модификацию DOM-документа. Это удалось решить через проверку цвета у корневого элемента html.

Другая проблема возникла из-за различного поведения браузеров при добавлении стилей через JavaScript. IE и Safari начинают применять эти правила только, если они были добавлены в тег head. Тут нет побочных эффектов, так как этот элемент уже существует на момент выполнения кода. Но сам элемент style нужно сформировать особым образом. В IE есть свойство styleSheet у элемента, которое позволяет работать с правилами. В свою очередь у объекта styleSheet есть поле cssText, которое позволяет получать и устанавливать текстовое представление правил. Хочу отметить, что изменить свойство cssText можно только однажды. Если все же потребуется его поменять, то нужно будет удалить старый элемент style и добавить новый с обновленными значениями.

Граница css IE6 / IE7 на элементе select

есть ли у кого-нибудь решение для стилизации границ элементов «select» в Internet Explorer с помощью CSS?

14 ответов

насколько я знаю, это невозможно в IE, потому что он использует компонент ОС.

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

Edit: ссылка сломана, я сбрасываю контент

предположим, мы хотим, чтобы он выглядел немного более современным, возможно, так:

Перекрывание селектов в IE6

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

Свойство z-index относится ко второй группе, которое несомненно вызывает больше смятения, чем любое другое. По иронии, однако, при полном понимании того, что такое z-index, он очень прост в использовании и часто является эффективным способом преодоления многих проблем макета.

В этой статье, мы рассмотрим что такое z-index, какие есть проблемы в его понимании, а также обсудим некоторые примеры его использования. Также рассмотрим разницу его обработки браузерами, особенно в предыдущих версиях Internet Explorer и FireFox.

Так что же это за свойство?

Свойство z-index определяет уровень размещения в стеке, глубины html-элемента. «Уровень глубины» означает позицию элемента по оси Z (как перпендикулярную осям X и Y экрана). Чем больше значение z-index, тем элемент будет выше.

Естественное расположение элементов

На странице, обычное размещение элементов (я имею в виду расположение вдоль оси Z) определяется несколькими факторами. Ниже представлен список этих факторов, начиная с самых нижних элементов. В этом списке подразумевается, что ни одному из элементов явно не присваивается свойство z-index.

  1. Фон и границы элемента, определяющего контекст стека.
  2. Элементы с отрицательным контекстом стека, в порядке отображения.
  3. Непозиционированные (position: static), а также без установленного свойства float (float: none) блочные элементы (display: block), в порядке отображения.
  4. Непозиционированные, с установленным свойством float, блочные элементы, в порядке отображения.
  5. Строчные (inline) элементы, в порядке отображения.
  6. Элементы с установленным свойством position, в порядке отображения.

Корректное применение свойства z-index, может изменить естественное расположение в стеке.

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

У этих элементов разные цвета фона и границ, а последние два смещены за счёт установленного отрицательного свойства margin. Таким образом видно естественное размещение элементов, каждый следующий находится «выше» предыдущего. У этих элементов не установлено свойство z-index, их порядок размещения в стеке является естественным.

Где могут быть проблемы?

Давайте рассмотрим самую популярную проблему у начинающих разработчиков. Дело в том, что свойство z-index работает только с элементами, для которых свойство position установлено в absolute, fixed или relative.

Чтобы продемонстрировать это, выведем те же самые три элемента, но с установленным свойством z-index, чтобы попытаться изменить порядок расположения вдоль оси Z.

Установим серому элементу z-index равным 9999, синему — 500, а коричневому — 1. Логично ожидать, что порядок изменится. Но не в этом случае, поскольку свойство position по-умолчанию равно static.

Установим свойство position в relative и посмотрим что получилось:

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

Синтаксис

Свойство z-index влияет как на блочные элементы, так и на строчные (inline). Значением может быть положительное или отрицательное число, либо значение по умолчанию — auto. Значение по умолчанию означает что элемент находится на том же уровне как и его родитель.

Ниже представлен CSS для третьего примера, где свойство z-index применяется корректно:

И снова повторюсь, специально для новичков в CSS: свойство z-index не будет работать, пока вы не установите свойство position.

Использование в javaScript


Вы можете повлиять на свойство z-index динамически, используя javaScript. Синтаксис похож на обычный для большинства CSS свойств, с использованием camel-нотации для замены дефиса в свойствах CSS.

Некорректная реализация в IE и FireFox

В некоторых случаях, в IE6, IE7 и FireFox 2, встречается неверная реализация свойства z-index.

Элемент select в IE6

В Internet Explorer 6, элемент select является windows-контролом, по этой причине он всегда отображается поверх всех элементов, игнорируя обычный порядок размещения, а также свойства position и z-index. Проблема показана на картинке ниже:

Элемент select находится в документе первым, его свойство z-index равно 1, а position установлен в relative. Div выводится после select, а его z-index равен «9999». Исходя из всего этого, div должен находится над select, как это происходит в других браузерах:

Если вы просматриваете эту статью не в IE6, вы увидите что div расположен выше select.

Эта ошибка IE6, является большой проблемой для выпадающих меню, когда они должны перекрывать элемент select. Решением может быть использование javaScript для того чтобы временно скрыть select-ы, а потом, после исчезновения меню, показать опять. Другим решением может быть использование iframe .

Позиционированные родители в IE6/IE7

Internet Explorer версий 6 и 7 некорректно сбрасывают контекст стека в отношении ближайшего позиционированного родителя. Чтобы продемонстрировать эту ошибку, мы опять отобразим два div-а. Но в этот раз мы обернём первый из них в позиционированный элемент.

У серого элемента z-index равен 9999, у синего — 1, оба элемента позиционированы. Поэтому, при корректной реализации, серый элемент отобразится поверх синего.

Если же вы откроете эту страницу в IE6 или IE7, вы увидите что синий элемент перекрывает серый. Это происходит по причине того, что серый элемент обёрнут в ещё один div, которому position установлен в relative.

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

Отрицательные значения в FireFox 2

В FireFox 2, элементы с отрицательным z-index находятся под контекстом стека, вместо того, чтобы быть над фоном и границами элемента, который формирует контекст стека. Пример вы можете увидеть на картинке:

Ниже представлена html-версия

Как видите, фон серого элемента (который формирует контекст стека) находится под синим, а текст (который является inline-элементом в сером элементе) находится над ним, что соответствует правилам естественного расположения, описанным выше.

Примеры использования

В оригинальной статье приведено много примеров использования свойства. Честно говоря мне лень это переводить, в основном — это скриншот, небольшой комментарий и ссылка. Если же всё-таки вам это действительно надо, то пишите, выделю время.

Кроме того, вы можете посмотреть как работает z-index здесь (взято отсюда )

Кто как борется с IE6, IE7, IE8?

16.11.2011, 21:08

Отображение кракозябр в IE6-IE7
Добрый день не пойму почему у меня в на сайту в Интернете Эксплорере в 6 и 7 версиях.

Перечень косяков браузеров Ie6 Ie7
Есть ли какой нибудь «перечень проблем» для браузеров Ie6 и Ie7. Нужен для создания оптимального.

странная ширина страницы в ie6, ie7
добрный день. помогите пожалуйста решить такую проблему кроссбраузерности css. есть сайт.

Верстка под ie6 — ie7 — актуально ли?
Вопрос -1. Интересно кто ни будь еще верстает под ie-6 и 7 или эти браузеры уже неучитываются. .

Подключение стилей для IE6-IE8
Уважаемые эксперты! Помогите с решением внешнего вида страниц сайта в IE6-IE8. Что нужно писать в.

16.11.2011, 21:32 2 16.11.2011, 22:05 [ТС] 3 16.11.2011, 22:18 4
16.11.2011, 22:18
16.11.2011, 22:42

Я вот счастливый человек, по работе нужна поддержка только 9 IE 🙂

10 возмутительных багов IE и пути их решения

Сегодня я намерен представить вам 10 самых распространенных багов, имеющих место в браузерах IE, а так же расскажу как их избежать.

Вступление

В практике каждого веб-разработчика были проблемы, связанные с непониманием браузерами IE некоторых элементов кода. И я как разработчик тоже постоянно сталкиваюсь с такими причудами IE, что порой просто хочется биться головой об стенку! Однако, время идет, мы учимся на своих ошибках, хотя правильней будет сказать не своих, а браузера IE, и начинаем понимать и привыкать к его странному поведению. Нам приходится с этим мириться, так как еще есть пользователи, продолжающие пользоваться 6 версией IE. Самый лучший способ предупредить проблемы — это сверять каждый свой шаг с поведением различных браузеров. Ведь проще устранить ошибку сразу же, чем потом рыскать среди тысячи строк html и css кодов.

Многие компании настроены против 6 версии IE, но людям, продолжающим им пользоваться, похоже, все равно. Что делать? Продолжать бороться с багами данного браузера. Но хочу вас порадовать — ежемесячная статистика, которую нам любезно представляет w3cschool, гласит, что количество упрямых пользователей IE6 значительно сократилось за последние годы. В январе 2006 года их было 60,3%, а в августе 2009 года их зарегистрировано уже 13,6%. Думаю, к середине 2010 года мы, наконец, избавимся от IE6:) О ДА.


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

1. Баг IE6, выдающий текст повторно

Как раз перед тем, как сесть писать эту статью я столкнулся вот с таким багом: из ниоткуда выскакивает дублированный кусок текста, и размещается он прямо под оригинальным текстом. Я начал экспериментировать и о удача!, я нашел как с ним бороться.

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

Однако, Hippy Tech Blog, к которому я тоже обращался за помощью, предлагает другие решения, к тому же он поясняет причину данного бага — оказывается во всем виноваты html теги комментариев, ведь IE6 не воспринимает их должным образом.

• обрамлять комментарии тегами
• удалять все комментарии
• в предшествующем элементе float указывать стиль
• использовать отрицательные поля в соответствующих плавающих div
• добавить к оригинальному тексту примерно 10 пробелов (мой способ)

2. Position Relative и Overflow Hidden

Практически каждый раз, когда я пишу урок по jQuery , я сталкиваюсь с одной и той же проблемой, ведь я привык использовать overflow:hidden. Баг появляется, когда есть исходный (родительский) элемент overflow со значением hidden и дочерний элемент с позицией :relative.

Что же происходит вы можете увидеть вот в этой статье — position:relative and overflow in internet explorer

Решение
• добавить position relative и родительскому элементу

3. Min-Height для IE

IE просто игнорирует min-height свойства, но вы теперь можете справиться и с этой проблемой. Данное решение магически действует не только на IE6, но и на Mozilla/Firefox/Gecko, Opera 7.x+, Safari1.2

4. Бикубическое отображение масштабируемых изображений

Вам понравится данное решение. Раздражает ли вас плохое качество картинок при изменении их масштаба в браузере IE? Согласитесь IE выполняет эту задачу не очень качественно.

5. Прозрачность PNG

Полагаю, что каждый знаком с этой проблемой, и все же я уделю и этому пункту немного времени.
Если вам нужно прозрачное изображение, и изображения в формате gif не могут дать вам нужного эффекта, вам пригодится данный прием. Но помните, что используя этот прием и устанавливая PNG в качестве фона, вы не сможете задать его позицию.

6. Прозрачный фон встроенного окна IFrame

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

7. Отключение вертикальной полосы прокрутки, предусмотрено в IE по умолчанию

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

8. Псевдокласс :hover

IE поддерживает только псевдокласс :hover для элемента anchor. Но ведь того же самого эффекта можно добиться и используя jQuery.

9. Блочная модель — Box Hack Model

Это самый частый баг. Дело в том, что IE рассчитывает ширину не так, как остальные браузеры. В соответствии со стандартом консорциума W3C, полная ширина должна подсчитываться следующим образом:

А вот IE делает подсчет, не учитывая данные отступов и границ

Можно воспользоваться следующим CSS кодом. Все стандартные браузеры смогут прочесть такую строку — width:180px, кроме IE5.

10. Удваивание полей

Если у вас имеются float элементы со значениями полей left или right, то 6 версия IE удваивает поля. Например, поле (интервал) шириной в 5 пикселей вот в такой строке margin-left:5px в IE6 превратится в поле с шириной в 10 пикселей. Данную проблему можно устранить добавив всего одну строку display:inline.

Надеюсь, данный урок вам очень пригодится:)

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.queness.com
Перевел: Максим Шкурупий
Урок создан: 16 Ноября 2009
Просмотров: 37444
Правила перепечатки

5 последних уроков рубрики «Разное»

Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг — это будущее Ваших сайтов

Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.

Разработка веб-сайтов с помощью онлайн платформы Wrike

Создание вебсайта — процесс трудоёмкий, требующий слаженного взаимодействия между заказчиком и исполнителем, а также между всеми членами коллектива, вовлечёнными в проект. И в этом очень хорошее подспорье окажет онлайн платформа Wrike.

20 ресурсов для прототипирования

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


Топ 10 бесплатных хостингов

Небольшая подборка провайдеров бесплатного хостинга с подробным описанием.

Быстрая заметка: массовый UPDATE в MySQL

Ни для кого не секрет как в MySQL реализовать массовый INSERT, а вот с UPDATE-ом могут возникнуть сложности. Чтобы не прибегать к манипуляциям события ON_DUPLICATE можно воспользоваться специальной конструкцией CASE … WHEN … THEN.

Самая полная шпаргалка для IE6 или как исправить 25+ ошибок Internet Explorer

Лучшая практика по «утрясанию дел» с Internet Explorer 6 — отказаться от его поддержки.

Стоп. Хорошо, я чувствую Ваше огорчение. Вы веб разработчик и Вы готовы рвать на голове волосы, потому что вынуждены поддерживать Internet Explorer 6, или скажем более корректно — IE6 не хочет «дружить» с Вами. Вы тратите на это часы, но Вы не можете выправить макет своей верстки. Сочувствую. Я могу Вам помочь.

Это не то разглагольствование или компания по поводу «отстрела» IE6. Таких вещей полно в Интернете, но они Вам не помогут если Вам необходима поддержка IE6, этот браузер продолжает занимать значительное место на рынке браузеров и Вы не можете просто так игнорировать его. Нет, этот ресурс Ваша реальная надежда.

Я «перевернул» кучу ресурсов в Интернет и включил некоторые из моих собственных исправлений для IE6 и теперь я собрал все это вместе в одной шпаргалке/описательном руководстве, как единый источник для того, кто хочет «подружиться» с Internet Explorer 6. Где было возможно, я улучшил решение предлагая более понятный и корректный вариант вместо «кривого» хака. Также я постарался корректно ссылаться на первоисточники, но иногда решения были настолько растиражираваны в Интернет, что найти их начальные источники было очень затруднительно. Если Вам попадется отсутствующая ссылка на первоисточник или если я пропустил какой-либо баг или исправление, пожалуйста свяжитесь со мной и дайте знать, я буду постоянно обновлять эту страницу.

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

Содержание

Раздел Баг/Фикс/Лучшее решение
Стратегии
  • Удельный вес IE6
  • Планируйте свой дизайн и делайте все просто
  • Используйте правильный doctype
  • Проверяйте ваш код
  • Сперва разрабатывайте для браузеров совместимых со стандартами
  • Использование прогрессирующих улучшений
  • Используйте правило обнуления CSS
  • Используйте JavaScript фреймворк
  • Используйте JavaScript IE Fix
  • Как делать отладку в IE
Как отделить IE6
  • Использование условного комментирования для Internet Explorer
  • Как отделить IE6 с помощью селекторов CSS
  • Как использовать JavaScript для определения IE6
Изображения
  • Альфа прозрачность PNG в IE6
  • Закругленные углы в IE6
  • Как разрешить проблему с мерцанием фоновых изображений
Макет
  • Понимание hasLayout
  • Бокс модель IE6
  • Минимальная высота
  • Максимальная высота
  • 100% высота
  • Минимальная ширина
  • Максимальная ширина
  • Двойной Margin для Float элементов
  • Как очистить плавающие элементы
  • Падение плавающих элементов
  • Баг гильотины
  • Баг с 1px интервалом для абсолютно спозиционированных элементов
  • Баг 3px интервала для плавающих элементов
  • IE и свойство z-index
  • Баг с overflow
Списки
  • Проблема с шириной элементов горизонтальных списков
  • Лестничный баг
  • Баг вертикальной разбивки или баг пробельных символов
Поведение
  • В IE6 нет Hover состояния
  • Реализация тега Canvas в IE
  • IE6 баг рисайзинга
JavaScript
  • Ошибка: Ожидался Identifier, String или Number
  • Утечки памяти IE JavaScript
Разное
  • Баг с задвоенными символами
  • Favicons в IE
  • GZip в IE6
Бонус ресурсы

Стратегии

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

Удельный вес IE6

В соответствии с удельным весом, текущий процент (Август 2009) пользователей IE6 составляет 25.25% (прим. hb: Октябрь 2010 — 15,55%), но по другим источникам этот процент намного меньше 18.1%. Как говорит статистика, мы наблюдаем тренд на снижение. Однако, действительно значимой статистикой будет статистика Вашего собственного сайта. Если у Вас уже есть аналитика по трафику для Вашего сайта, служит ли она оправданием тому, что стоит делать поддержку IE6? Оперируя терминами бизнеса: каково соотношение цена/польза для времени и денег потраченных на разработку под IE6 против того, что-бы вовсе бросить его поддержку? Можете ли Вы сделать бизнес план по поддержке постепенно уходящего IE6?

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

Планируйте свой дизайн и делайте все просто

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

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

Используйте правильный doctype

Отказ от использования правильного (или какого-либо) doctype вызовет включение режима совместимости и будет препятствовать правильному отображению вашей страницы во всех браузерах. Используйте один из следующих doctype: HTML 4.01 Strict, HTML 4.01 Frameset, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Frameset, XHTML 1.0 Transitional или XHTML 1.1

HTML 4.01 Strict

HTML 4.01 Frameset

HTML 4.01 Transitional

XHTML 1.0 Strict

XHTML 1.0 Frameset

XHTML 1.0 Transitional

XHTML 1.1

Проверяйте ваш код


Я слышал утверждение от нескольких людей, что у проверки кода на ошибки нет никаких отношений с работающим продуктом, но я не покупаю такие продукты. Валидация действительно не настолько важна во многих случаях и занимает всего несколько минут на выполнение. Несколько потраченных минут на валидацию вашего XHTML и CSS может принести пользу для всех браузеров, не только для IE6. Валидация позволяет быть уверенным в устранении проблем с последующей совместимостью и снижает цену на поддержку в будущем. Минимальное и достаточное требование — проверяйте Ваш XHTML. Единственная причина по которой можно проигнорировать этот пункт — использование преимуществ некоторых свойств CSS3 в браузерах, которые могут их поддерживать.

Сперва разрабатывайте для браузеров совместимых со стандартами

Так-же как и с проверкой вашего кода, вы избавитесь от головной боли, если первым делом будете производить верстку для браузеров поддерживающих стандарты, таких как Firefox, Opera, Safari и Chrome и затем подстраивать ее для несовместимых браузеров, таких как IE6 и IE7. В следствии того, что совместимые браузеры отображают информацию в той или иной мере одинаково, вы сможете сосредоточиться на «особенностях» Internet Explorer’а. Используя такой подход к процессу верстки, он сможет помочь в будущем улучшать ваш код, так как дает надежную основу и если вы отмечаете ваши поправки, вы сможете безболезненно удалить их, когда поддержка таких браузеров более не потребуется.

Использование прогрессирующих улучшений

Прогрессирующие улучшения означают то, что базовая функциональность всегда доступна для всех пользователей до добавления в проект глянца. В общем, термин прогрессирующие улучшения указывает на то, что веб приложения должны работать без JavaScript и с использованием JavaScript добавляться: анимация, Ajax эффекты и т.п., но когда это говорится по отношению к Internet Explorer 6, принцип прогрессирующих улучшений может так-же применяться касательно CSS3 (или даже ко многим частям CSS2), HTML5 и другим веб протоколам, которые IE6 не поддерживает.

В некоторых случаях, это просто может стать невозможным, когда вы пытатесь донести все свои умения до всех пользователей всех браузеров, в особенности тех, кто использует Internet Explorer 6. Используя стратегию прогрессирующих улучшений будьте уверены, что такие пользователи получают хотя-бы минимальные возможности при работе с вашим сайтом или веб приложением.

Еще о прогрессирующих улучшениях

Используйте правило обнуления CSS

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

Простое обнуление

Популярные CSS «обнуляторы»

Используйте JavaScript фреймворк

Если JavaScript представляет из себя лишь тривиальную часть вашего сайте, подумайте над использованием JavaScript фреймворка. Большинство фреймворков протестированы в различных браузерах, включая IE6, и смогут управляться со множеством (хотя и не все) Ваших JavaScript кросс-браузерных проблем автоматически. Выбрать есть из чего. В общем, что-либо, что может быть сделано в одном, может быть сделано и в другом, поэтому выбор фреймворка основан на Ваших персональных синтаксических предпочтениях.

Список некоторых, самых популярных фреймворков:

Конечно существует множество других фреймворков и еще большее количество появляется, но их список не для сегодняшнего дня. Из тех, что в списке я люблю, использую и искренне рекомендую MooTools, если вы знакомы с JavaScript. Если Вы новичек, моей рекомендацией стал бы jQuery.

Используйте JavaScript IE Fix

В Интернет «мелькают» несколько JavaScript решений, которые заставляют Internet Explorer работать как браузер поддерживающий стандарты. Если Ваша целевая аудитория имеет достаточно высокий процент пользователей IE с включенным JavaScript, Вы можете попробовать использовать скрипт Dean Edwards’ IE7 или другие аналогичные скрипты.

Как делать отладку в IE

Internet Explorer «славится» своей нелюбовью к отладке, но существует несколько инструментов позволяющих облегчить жизнь разработчиков. Как говорилось ранее, перво-наперво начинайте работать с браузерами поддерживающими стандарты. Firebug и Web Developer Toolbar прекрасные дополнения для Firefox, которые косвенно помогут содействовать или предугадать в исправлении многих ошибок для IE. Если Вы хотите получить всю мощь Firebug в других браузерах, Firebug Lite будет доступен Вам как апплет для браузера.

Для тестирования различных версий Internet Explorer, существует пара хороших вариантов если мы не рассматриваем вариант с виртуальной машиной, IE Collection и IETester, оба из которых бесплатны (но все еще имеют недоделки). Производители IETester так-же предлагают DebugBar, плагин для IE, который бесплатен для персонального использования, но требует коммерческую лицензию после 60-ти дневного использования.

Как отделить IE6

Первый шаг в деле «уживания» с Internet Explorer 6 возможность отделить его так, что-бы какие-либо изменения в коде отражались только на IE6 и ни на каких других браузерах. Для этого есть несколько путей для IE6: условное комментирование, селекторы CSS, и JavaScript. Мы рассмотрим каждый из этих методов.

Использование условного комментирования для Internet Explorer

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

Синтаксис такого комментирования следующий:

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

К единственному недостатку использования условного комментирования относится необходимость в дополнительном HTTP запросе для требуемого браузера. Хотя такая методика часто применима к таблицам стилей, я бы не рекомендовал применять ее для условных внешних JavaScript файлов, потому что JavaScript файлы работают в блокирующем режиме и не дают загрузится другим файлам пока полностью не загрузятся сами. Если Вам необходим условный JavaScript во внешнем файле, используйте возможности самого JavaScript для определения того, с какой версией он работает.

Как отделить IE6 с помощью селекторов CSS

Если Вы не хотите использовать условные таблицы стилей, селекторы CSS это еще один способ отделения IE6. Internet Explorer 6 не поддерживает селекторы потомков. Сперва Вы делаете CSS определения для IE6 и затем используете селекторы потомков для «скармливания» CSS определений браузерам IE7+ и всем современным браузерам.

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

Еще немного для чтения

Как использовать JavaScript для определения IE6

Если Вы хотите определять IE6 используя JavaScript, но не хотите использовать условные комментарии, делайте так:

Еще немного для чтения

Изображения

Internet Explorer 6 имеет несколько спорных вопросов касательно изображений, которые могут застопорить процесс разработки или внести коррективы в Вашу верстку и дизайн. Этот раздел призван помочь Вам избавиться от головной боли.

Альфа прозрачность PNG в IE6


Один из самых печальных аспектов Internet Explorer 6, это невозможность поддержки прозрачности для высококачественных изображений и трудности в реализации эффектов связанных со слоями. Существует несколько JavaScript решений, которые я предлагаю ниже, но ни одно из них не предлагает использование CSS спрайтов, за исключением Alpha версия Twin Helix’s IE6 PNG Fix.

Наипростейшее решение, это сохранение изображений как PNG8 файлов с включенным Альфа каналом прозрачности. Если Вы используете Adobe Fireworks, Вы можете сделать это выбрав Save As > Save as type > Flattened PNG > Options > Alpha Transparency. Если Вы испольуете какой-либо тип заливки, Вы можете выбрать Dither для получения градиента максимально возможного качества. Сохранение как PNG8 с Альфа каналом прозрачности будет отображать полупрозрачность областей изображений как 100% прозрачность, так как здесь нет различных уровней полупрозрачности.

Другой способ, это добавить специфичный для IE фильтр в таблице стилей CSS предназначенный только для IE6. Aaron Baxter объясняет эту технику в учебнике на своем блоге.

PNG корректировки через JavaScript

Закругленные углы в IE6

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

Как разрешить проблему с мерцанием фоновых изображений

Если Вы используете CSS спрайты как фоновые изображения к ссылкам или кнопкам, Вы заметите, что изредка изображения мерцают в Internet Explorer 6. Причина — IE6 неправильно кеширует фоновые изображения и перезагружает их все время. Вы можете устранить это с помощью одной единственной строки JavaScript которая заставляет IE6 кешировать изображения.

Другие решения

Макет

Ошибки разметки IE6 это его самая печальная сторона, в особенности если Вы имеете дело с однопиксельным дизайном и он работает во всех браузерах, но не в Internet Explorer 6. Эта секция посвящена этим ошибкам и тому как с ними бороться.

Понимание hasLayout

Число багов IE6 и ошибок рендеринга могут быть приписаны к проприетарному концепту от Microsoft hasLayout. Коротко объясняется, что hasLayout переключает какой-либо элемент в заданные размеры, задаваемые через height или width. Отсутствие этих определений приводит к множеству багов, которые Вы несомненно будете иметь при работе с IE6.

Вместо того, что-бы вдаваться в длинное описание hasLayout, я просто отшлю Вас к превосходному учебнику от John Gallant и Holly Bergevin, который детально опишет когда и как нужно задумываться о hasLayout.

Еще немного для чтения

Бокс модель IE6

Если в Internet Explorer 6 включен режим совместимости, IE6 будет использовать старую реализацию боксовой модели от Microsoft, которая исключает границы и отступы из общей ширины элемента. Общая стратегия в деле с багами заключается в устранении переключения в режим совместимости используя корректный doctype или отказ от применения свойства width к элементам которые уже имеют border или padding. Здесь может быть применено и условное комментирование, но это уже на крайний случай.

Еще немного для чтения

Минимальная высота

IE6 игнорирует свойство min-height и вместо него использует height как минимальную высоту. Спасибо Dustin Diaz, раскопавшей фикс через использование !important, который IE6 переопределяет, а другие браузеры нет. Это-же решение работает и для min-width.

Другое решение, использование CSS селекторов для достижения такого-же эффекта, но другим путем.

Максимальная высота

К сожалению, один единственный путь для достижения max-height эффекта в IE6 это использование специфичного для IE CSS выражения, которое эквивалентно запуску JavaScript в таблице стилей, или использование собственно JavaScript. Из этих двух я рекомендую использовать решение с JavaScript, так как запуск JavaScript через CSS отъедает много ресурсов и может привести к «падению «браузера. Оба решения не будут работать при выключенном JavaScript. Заметим, что это решение годится только для IE6, все остальные браузеры поддерживают max-height.

JavaScript

100% высота

Что-бы элемент достиг 100% высоты в IE6, Вам необходимо определить фиксированную величину высоты его родительского элемента. Если Вам необходимо развернуть на всю высоту размер страницы, примените height:100%; к элементу html и body.

Минимальная высота

Аналогично max-height и max-width, min-width не поддерживается IE6. Есть два решения, применить экстра разметку, что-бы достичь желаемого или использовать JavaScript.

Максимальная ширина

Есть только один путь реализовать max-width в IE6, и он идет через использование JavaScript.

JavaScript

Двойной Margin для Float элементов

Internet Explorer 6 некорректно удваивает поля для плавающих элементов добавляя такое-же поле к той стороне, в которую данный элемент уплывает. Steve Clason победил этот баг, с помощью простого добавления display:inline; к плавающим элементам.

Как очистить плавающие элементы

Если Вы пытаетесь обернуть плавающий элемент в контейнер, но контейнер не желает делать это правильно, обязательно установите height или width свойства контейнера в значения отличные от auto и также добавьте свойство overflow с одним из трех следующих значений: auto, hidden, или scroll. Alex Walker впервые написал об этой технике и отдал должное Paul O’Brien за идею.

Пример HTML

Пример CSS

Еще немного для чтения


Падение плавающих элементов

Падение плавающих элементов случается в том случае, когда содержимое плавающего контейнера превысит его заданную ширину. В Firefox, IE7 и других браузерах, содержимое будет просто обрезано, но в Internet Explorer 6, контейнер будет игнорировать заданную ширину и раздвинет ее до размеров содержимого. Если какие-нибудь другие элементы будут выплывать далее за контейнером, они опустятся ниже него.

Баг с падением плавающих элементов относится к той ошибке IE6 у которой нет правильного решения, по крайней мере из тех, что я смог найти. Ее можно обойти через overflow:hidden; или overflow:scroll;, но скрытое содержимое будет все-равно доступно и скроллируемое значение может поломать верстку. Даже решение с JavaScript не выглядит сподручным из-за проблем с миграцией. Лучшее решение, которое я могу посоветовать, что-бы вовсе устраниться от таких проблем, либо использовать фиксированную верстку, либо сознательно контролировать размер содержимого.

Еще немного для чтения

Баг гильотины

Баг гильотины определенно очень неприятная ошибка IE6 (и IE7). Он обрезает содержимое в плавающем и «неочищенном» элементе, который больше элемента своего контейнера со ссылками имеющими разные hover стили и с неплавающим содержимым идущим после плавающего, при наведении на ссылку мыши. Звучит непонятно? Не беспокойтесь, этот баг и его решение хорошо задокументированы народом на Position Is Everything.

Несмотря на трудности вызываемые багом, решения довольно просты. Первое касается добавления дополнительного элемента в конец контейнера и установки для него свойства clear:both;. Вторая корректировка вызывается через hasLayout в элементе содержащем ссылки которые вызывают эффект гильотины. Это может быть сделано простым добавлением определения height:1%;.

Еще немного для чтения

Баг с 1px интервалом для абсолютно спозиционированных элементов

Этот баг встречается в IE6 (в IE7 его исправили) из-за ошибки округления. IE6 будет добавлять 1-пиксельный интервал к правой или к нижней границе между абсолютно спозиционированным элементом и относительно спозиционированным родителем, если размер родителя определяется нечетным числом. Единственное реальное решение для этого бага, определение четной высоты и ширины для родительского элемента. Прискорбно, но для резиновой верстки нет реально работающего решения. Paul O’Brien довольно детально объясняет эту проблемы здесь.

Баг 3px интервала для плавающих элементов

Так-же называемый 3-х пиксельный баг текстового подталкивания, этот баг появляется в IE6 когда текст граничит с плавающим элементом. IE6 добавляет 3 пиксельное поле между элементом и текстом, даже если в элементе ничего не определено. У Stu Nichols есть определенно элегантное решение этой проблемы.

IE и свойство z-index

Если Вы используете свойство z-index на спозиционированном элементе в Internet Explorer 6 или 7, стековый индекс будет обнулен в ноль, вызывая ошибку отрисовки. Решение, указывается некоей персоной под ником baker, и заключается в добавлении наибольшего z-index к родительскому элементу. В некоторых случаях, родительскому элементу также необходимо назначить свойство position:relative.

Еще немного для чтения

Баг с Overflow

Jonathan Snook документирует и решает баг с overflow, который случается, когда свойство overflow установлено на содержащий элемент и у относительно спозиционированного потомка высота больше высоты родителя. В обоих IE6 и IE7, вместо следования согласно объявленного overflow, больший элемент потомок будет всплывать поверх своего родителя. Где выход? Добавить position:relative к контейнеру.

Списки

Очевидно, что существует несколько специфичных для IE багов связанных со списками. Здесь перечислены некоторые из них с соответствующими решениями.

Проблема с шириной элементов горизонтальных списков

Если Вы пытаетесь построить список элементов ввиде горизонтального меню и применяете свойство float к элементу

  • , Вы увидите, что каждый элемент меню неприятно вытянется до 100% ширины элемента его содержащего, делая меню элементов ввиде вертикального стека, а вовсе не горизонтального. И снова, эта проблема приключается только в IE6. Решение? Спасибо Rofikul Islam Shahin, оно простое. Просто добавьте float:left; к тегу , так-же как добавляли его к
  • и Ваше меню отбразится так, как Вы задумывали.

    Лестничный баг

    Лестничный баг встречается когда содержимое элементов
    плавает и Вы пытаетесь создать горизонтальный список (часто используется для навигации). Каждый элемент будет стремиться встать ввиде вертикального стека или будет всплывать в лестничном виде.

    Каково-же решение? Их два: применить свойство float к

  • или применить display:inline; к элементу
  • .

    Баг вертикальной разбивки или баг пробельных символов

    При создании вертикального списка состоящего из элементов
    с блоковым потомком, Internet Explorer 6 (и возможно в некоторых случаях IE7) будет ошибочно добавлять вертикальные пробелы между элементами списка. Существует несколько решений этой проблемы, но давайте сперва быстренько взглянем на пример.

    Пример HTML

    Пример CSS

    Корректировки
    Jon Hicks получил благодарности за устранение этой проблемы с помощью установки свойств float и clear для якоря в списке

    Другое решение — использовать hasLayout с определением height или width на якорных тегах (или каком-нибудь блоковом потомке).

    Элементу


    также может быть назначено определение display:inline;.

    Другой интересный фикс заключается в размещении пробела между последним символом текста в блоковом потомке и закрывающимся тегом.

    Еще корректировки и объяснения

    Поведение

    Как и во множестве других действий, IE6 имеет проблемы с тем, как они себя ведут. Оказии с поведением случаются из-за того, что IE6 слишком устарел, потому что он не полностью поддерживает CSS2, потому что он совсем не поддерживает CSS3 или потому что Microsoft просто решила следовать своим собственным стандартам.

    Давайте посмотрим на некоторые из множества поведенческих проблем с Internet Explorer 6.

    В IE6 нет Hover состояния

    Для IE6 не существует поддержки hover состояния для каких-либо элементов кроме тэга якоря с атрибутом href или элементов для которых такой тег взаимодействует с контейнером. Это утверждение жестко ограничивает использование эффектов mouseover в IE6, но все-таки для этого есть несколько лазеек.

    Лучшая из них, не полагаться на свойство hover в критических местах функционала сайта. Вместо этого, используйте его только для акцентирования или расширения уже реализованной функциональности и доступности.

    Большинство фиксов hover ограничения для IE6 используют либо проприетарное свойство поведения Microsoft CSS или решение с JavaScript, обычно через фреймворк JavaScript или через скрипт IE6 fix.

    Реализация тега Canvas в IE

    Ни одна из версий Internet Explorer (включая IE7 и IE8) не поддерживает тег HTML5 canvas потому что Microsoft предпочитает пропихивать вместо него свой VML. Однако, есть несколько JavaScript решений эмулирующих тег canvas для IE.

    Canvas решения и ресурсы

    IE6 баг рисайзинга

    Emil Stenstr?m раскопал решение для бага с рисайзингом IE6. В общем, где отцентрирован элемент body и реализована фиксированная верстка, любой относительно спозиционированный элемент внутри него станет фиксированным если страница изменит размеры и не обновится. Решение Emil’я простое и элегантное: добавить position:relative; к body элементу.

    JavaScript

    Internet Explorer 6 также страдает от несметного числа ошибок в деле интерпретирования JavaScript. У меня нет никакой возможности описывать все баги JavaScript в IE6, но я расскажу о нескольких, наиболее часто встречаемых из них и о том, как их исправить.

    Ошибка: Ожидался Identifier, String или Number

    Internet Explorer не терпит недостаточно оформленный JavaScript код и часто выдает ошибку, «Expected Identifier, String, Or Number» если в конце массива элементов присутствует замыкающая запятая, другие браузеры более снисходительны к этому. Удалив запятую, Вы обычно избавляетесь от этой ошибки.

    Утечки памяти IE JavaScript

    Из-за того, что Internet Explorer использует собственный менеджер памяти, он может быть подвластен проблеме с утечкой памяти, так как неправильно ее освобождает во время работы с JavaScript. Douglas Crockford написал подробный отчет о предотвращении утечек памяти для JavaScript в Internet Explorer. Еще одна страница для этого раздела, написана Hedger Wang и ее так-же стоит прочитать.

    Разное

    Этот раздел специально выделен для нескольких багов Internet Explorer 6 и их решений, которые не вошли в предыдущие.

    Баг с задвоенными символами

    Когда IE6 натыкается на любой тип спрятанных элементов, таких как комментарии или элементы со свойством display:none; внутри плавающих элементов, он может задваивать символы. Проблема замечательно описана на Position Is Everything, и решение видится довольно простым: применить display:inline; к плавающему элементу, который предшествует скрытому элементу.

    Favicons в IE

    Favicon сокращение от Favorites Icon ссылающееся на изображение из 16×16 пикселей, которое появляется на какой-либо странице, которую Вы сохранили в своих закладках. Существует два способа заставить его появиться. Первый — просто сохранить изображение как файл favicon.ico в корне Вашего сайта. Internet Explorer и другие браузеры будут автоматически искать его и отображать. Второй метод разместить следующий HTML код в head секции Вашего документа (после загрузки изображения):

    Стоит заметить, что изображение favicon будет закешировано и не будет меняться пока Вы не очистите кеш Вашего браузера и не обновите его один или несколько раз. Если Вы хотите обновлять его автоматически для всех Ваших пользователей, установите «expire параметры» в заголовке ответа этого изображения.

    Еще к прочтению

    GZip In IE6

    Некоторые версии IE6, в особенности после обновления XP SP2, могут иметь проблемы с файлами пропущенными через GZip сжатие. К счастью, Seb Duggan нашел решение бага IE6 GZip используя ISAPI_Rewrite для Apache.

    Решение Seb’а — поместить следующий код в httpd.conf файл расположенный в директории с установленным ISAPI_Rewrite:

    Бонус ресурсы

    Хотя это и достаточно длинный список багов и исправлений для Internet Explorer 6, он совсем не исчерпывающий. Если Вы не смогли найти в нем что-то, посмотрите на эти дополнительные ресурсы.

    Настройки Internet Explorer 6

    Настройки Internet Explorer 6.

    Выберите в командной строке, « C ервис»

    В поле «Добавить узел в зону:» вносим адрес ресурса Октопус, Если стоит галочка «Для всех узлов…» её нужно снять. Далее нажимаем «Добавить», затем «Ок».


    Далее нажимаем на Кнопку «Другой…»

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

    Очистка Cookies и Временных файлов Интернета.

    Особенности и отличия настройки 7 и 8 версии IE .

    Основное отличие от 6 версии, это основное меню, которое может быть отключено.

    Для включения меню нужно встать на пустое поле и нажать правой кнопкой мыши, в появившемся контекстном меню ставим галочку «Строка меню»

    Также часть меню, находится в правой части шапки IE

    Основные настройки, остались там же, в меню «Сервис», «Свойства обозревателя», весь функционал остался прежним, за исключением визуализации, теперь очистка Cookies и временных файлов Интернета выглядит таблицей.

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

    На этом основная настройка Internet Explorer закончена.

    10 возмутительных багов IE и пути их решения

    Сегодня я намерен представить вам 10 самых распространенных багов, имеющих место в браузерах IE, а так же расскажу как их избежать.

    Вступление

    В практике каждого веб-разработчика были проблемы, связанные с непониманием браузерами IE некоторых элементов кода. И я как разработчик тоже постоянно сталкиваюсь с такими причудами IE, что порой просто хочется биться головой об стенку! Однако, время идет, мы учимся на своих ошибках, хотя правильней будет сказать не своих, а браузера IE, и начинаем понимать и привыкать к его странному поведению. Нам приходится с этим мириться, так как еще есть пользователи, продолжающие пользоваться 6 версией IE. Самый лучший способ предупредить проблемы — это сверять каждый свой шаг с поведением различных браузеров. Ведь проще устранить ошибку сразу же, чем потом рыскать среди тысячи строк html и css кодов.

    Многие компании настроены против 6 версии IE, но людям, продолжающим им пользоваться, похоже, все равно. Что делать? Продолжать бороться с багами данного браузера. Но хочу вас порадовать — ежемесячная статистика, которую нам любезно представляет w3cschool, гласит, что количество упрямых пользователей IE6 значительно сократилось за последние годы. В январе 2006 года их было 60,3%, а в августе 2009 года их зарегистрировано уже 13,6%. Думаю, к середине 2010 года мы, наконец, избавимся от IE6:) О ДА.

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

    1. Баг IE6, выдающий текст повторно

    Как раз перед тем, как сесть писать эту статью я столкнулся вот с таким багом: из ниоткуда выскакивает дублированный кусок текста, и размещается он прямо под оригинальным текстом. Я начал экспериментировать и о удача!, я нашел как с ним бороться.

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

    Однако, Hippy Tech Blog, к которому я тоже обращался за помощью, предлагает другие решения, к тому же он поясняет причину данного бага — оказывается во всем виноваты html теги комментариев, ведь IE6 не воспринимает их должным образом.

    • обрамлять комментарии тегами
    • удалять все комментарии
    • в предшествующем элементе float указывать стиль
    • использовать отрицательные поля в соответствующих плавающих div
    • добавить к оригинальному тексту примерно 10 пробелов (мой способ)

    2. Position Relative и Overflow Hidden

    Практически каждый раз, когда я пишу урок по jQuery , я сталкиваюсь с одной и той же проблемой, ведь я привык использовать overflow:hidden. Баг появляется, когда есть исходный (родительский) элемент overflow со значением hidden и дочерний элемент с позицией :relative.

    Что же происходит вы можете увидеть вот в этой статье — position:relative and overflow in internet explorer

    Решение
    • добавить position relative и родительскому элементу

    3. Min-Height для IE

    IE просто игнорирует min-height свойства, но вы теперь можете справиться и с этой проблемой. Данное решение магически действует не только на IE6, но и на Mozilla/Firefox/Gecko, Opera 7.x+, Safari1.2

    4. Бикубическое отображение масштабируемых изображений

    Вам понравится данное решение. Раздражает ли вас плохое качество картинок при изменении их масштаба в браузере IE? Согласитесь IE выполняет эту задачу не очень качественно.

    5. Прозрачность PNG

    Полагаю, что каждый знаком с этой проблемой, и все же я уделю и этому пункту немного времени.
    Если вам нужно прозрачное изображение, и изображения в формате gif не могут дать вам нужного эффекта, вам пригодится данный прием. Но помните, что используя этот прием и устанавливая PNG в качестве фона, вы не сможете задать его позицию.

    6. Прозрачный фон встроенного окна IFrame

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

    7. Отключение вертикальной полосы прокрутки, предусмотрено в IE по умолчанию

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

    8. Псевдокласс :hover

    IE поддерживает только псевдокласс :hover для элемента anchor. Но ведь того же самого эффекта можно добиться и используя jQuery.


    9. Блочная модель — Box Hack Model

    Это самый частый баг. Дело в том, что IE рассчитывает ширину не так, как остальные браузеры. В соответствии со стандартом консорциума W3C, полная ширина должна подсчитываться следующим образом:

    А вот IE делает подсчет, не учитывая данные отступов и границ

    Можно воспользоваться следующим CSS кодом. Все стандартные браузеры смогут прочесть такую строку — width:180px, кроме IE5.

    10. Удваивание полей

    Если у вас имеются float элементы со значениями полей left или right, то 6 версия IE удваивает поля. Например, поле (интервал) шириной в 5 пикселей вот в такой строке margin-left:5px в IE6 превратится в поле с шириной в 10 пикселей. Данную проблему можно устранить добавив всего одну строку display:inline.

    Надеюсь, данный урок вам очень пригодится:)

    Данный урок подготовлен для вас командой сайта ruseller.com
    Источник урока: www.queness.com
    Перевел: Максим Шкурупий
    Урок создан: 16 Ноября 2009
    Просмотров: 37445
    Правила перепечатки

    5 последних уроков рубрики «Разное»

    Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг — это будущее Ваших сайтов

    Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.

    Разработка веб-сайтов с помощью онлайн платформы Wrike

    Создание вебсайта — процесс трудоёмкий, требующий слаженного взаимодействия между заказчиком и исполнителем, а также между всеми членами коллектива, вовлечёнными в проект. И в этом очень хорошее подспорье окажет онлайн платформа Wrike.

    20 ресурсов для прототипирования

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

    Топ 10 бесплатных хостингов

    Небольшая подборка провайдеров бесплатного хостинга с подробным описанием.

    Быстрая заметка: массовый UPDATE в MySQL

    Ни для кого не секрет как в MySQL реализовать массовый INSERT, а вот с UPDATE-ом могут возникнуть сложности. Чтобы не прибегать к манипуляциям события ON_DUPLICATE можно воспользоваться специальной конструкцией CASE … WHEN … THEN.

    Перекрывание селектов в IE6

    Сейчас, на этапе недавнего появления новой версии браузера, вышеописанные неудобства касаются не только вебмастеров, но и вообще всех пользователей, пожелавших обновить свой браузер. Возврата к прежнему в системе не предусмотрено, а все предыдущие сайты и страницы рассчитаны в основном на IE6. Если в IE7 возникнет особенность, не позволяющая просмотреть страницу (а они гарантированно есть, не одна), пользователь попадёт в безвыходное положение — старой версии уже нет, под новую страница не скорректирована, инсталлировать старую версию в системе, вроде бы, нельзя (так было для прежних IE). Даже если окажется можно, то я бы не рекомендовал — появится непредсказуемое смешение библиотек dll в системе от старой и новой версий, поэтому MS избегает вольной инсталляции-деинсталляции. «Спасение» может быть в просмотре страницы под другой версией ОС или под другим альтернативным браузером. Зная это, позаботимся заранее о том, чтобы новых библиотек от IE7 в системе не было.

    Рано или поздно надо будет смотреть страницы под IE7. Делать альтернативную инсталляцию его в отдельной копии ОС неудобно, если под рукой нет запасного экспериментального компьютера.

    Решение предлагает Jon Galloway на страницах своего блога. Поначалу, для бета-версий IE7 он предлагал ряд инструкций — написать исполняемый файл, распаковать архив, запустить свой инсталлятор. Сейчас решение он сделал более автоматизированным: к нескольким файлам из архива программы надо добавить архив IE7 (важно, чтобы была правильная подходящая версия) и запустить собственную инсталляцию. Этот инсталлятор делает минимальные изменения в реестре и не помещает новых библиотек dll в системные папки. В результате, IE7 работает, а система избавлена от его «навязчивого» присутствия.

    Другие браузеры, кстати, действуют по такому же принципу — не спешат устанавливать критичные dll в систему. Поэтому много версий других браузеров может спокойно находиться и работать на одном компьютере. IE изначально с 4-й версии был сильно интегрирован в систему, поэтому иначе он поступать не может. В новой ОС MS планирует отказаться от такой тесной интеграции, ради соображений сетевой безопасности системы.

    Установка IE7 без поддержки табов (расширение xmllitesetup или, что то же, KB915865).

    Рассмотрим метод запуска IE7 Release, разработанный стараниями известного в этой теме Jon Galloway — без деинсталляции прежнего браузера, IE6. Статья написана в ноябре 2006 года, поэтому для новых версий релиза браузера IE7 процедура может несколько измениться. Смотрите инструкции на сайте автора программы. До сих пор им были выпущены патчи для IE7 Beta1,2,3 для запуска IE7 без установки его в системе. Я попробовал такой для беты-2 на релизе, но запустить не получилось — требуется патч под конкретную версию IE7. И вот, на странице блога Jon Galloway появилось сообщение о сделанной программе IE7 Standalone Launcher для релиза. Смотреть и скачивать отсюда: http://tools.veloc-it.com/tabid/58/ grm2id/4/ Default.aspx . Как он пишет, для каждой версии имеется собственный стартер (launcher).

    Попробуем сначала установить IE7 без предлагаемого к установке расширения KB915865 в процессе инсталляции. Интересует только движок, а чем больше будет инородных компонентов в системе, тем труднее будет ей управлять. Можно отказаться от него в процессе инсталляции а можно не доводить до запуска закомментированием команды START /D «%

    dp0/Installation/Update/» xmllitesetup.exe в файле IE7 Standalone Setup.bat — поставить перед ней слово «echo».

    • 1. Распаковать программу IE7 Standalone Launcher в отдельную папку (всё равно где находящуюся).
    • 2. Загрузить релиз IE7 c сайта MS (14.8 М), НО НЕ УСТАНАВЛИВАТЬ его (запустить, конечно, можно, но затем отменить установку). Это важно, потому что не предусмотрено механизма отката назад, к версии браузера IE6. Соответственно, не будет возможности запускать скрипты в просматриваемых страницах под самым популярным IE6, а большинство дизайнеров ориентировались на него при создании страниц. Поэтому может оказаться, что некоторые важные страницы не будет возможности просмотреть. Именно по этой причине создана программа IE7 Standalone Launcher, чтобы запустить IE7, но не отменить IE6 в системе.
    • 3. Скопировать загруженный файл с программой IE7 в папку с IE7 Standalone Launcher. В папке должно стать 7 файлов.
    • 4. Запустить IE7 Standalone Setup.bat .
    • 5. Далее — запускать браузер по клику на файле IE7.bat .

    Указанные действия при проверке на машине WinXP SP2 (со всеми патчами) привели к запуску IE7. Если не устанавливать запрашиваемый в bat-файле компонент (команда START /D «%

    Перекрывание нижнего колонтитула содержание в IE6

    У меня есть страница, где колонтитул перекрывающееся содержания в Internet Explorer 6. Я прилагаю пути к скриншоту, CSS файлов.

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

    Второй вариант, а не первый. Это ковшики как с длинным и коротким содержанием.

    Вы могли бы применить

    Я не могу сказать много, не зная (X) HTML макет, но это, кажется, ваше содержание имеет абсолютную позицию.

    Абсолютно позиционируемые элементы не влияют на макет страницы, поэтому это нормально, что ваша сноска выше содержания.

    Мастер Йода рекомендует:  Углубляемся в C++ move семантика и rvalue
    Добавить комментарий