CSS баги браузера Internet Explorer


Содержание

CSS баги браузера Internet Explorer

Форум Приднестровской поддержки CMS XOOPS.

По ссылке вы можете скачать последнюю версию CMS XOOPS. А так же прочитать инструкции по установке XOOPS и модулей

По данным ссылкам можно скачать модули нашей разработки.

Модуль инструкций. Ознакомьтесь с установкой XOOPS. C начальными познаниями по HTML,CSS, JS, PHP и др.

Добро пожаловать на сайт поддержки XOOPS.

Приднестровская поддержка XOOPS

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

1. Размер блоков.

Наверное, это самый частый баг с которым сталкиваются вeб-дизайнеры. Например вы задаете стили нашему блоку:

div#xbox <
width: 50px;
border: 4px solid #000;
padding: 10px;
>

В IE 6 ширина блока будет 50px, а в других браузерах будет 78px (50+2*10+2*4).
При верстке сайта это создает большие проблемы с позиционированием.

Возможное решение данной проблемы таково: если в блоке будет текст, к примеру, в теге, то свойство padding задаем тексту, но не блоку.

2. Ошибка отступа от края.

Вот пример еще одного блока:

div#xbox <
float: right;
margin-right: 10px;
>

В IE 6 будет удвоенный отступ с правого края с 10px до 20px, что снова вызывает проблемы в позиционировании.
В этом случае необходимо использовать свойство padding только для внутренних элементов блока.

3. Минимальная ширина и высота.

В IE 6 напрочь игнорируется установка минимальной высоты и ширины.

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

4. Эффекты при наведении курсора мыши.

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

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

5. Нет поддержки прозрачности при использовании в png файлов.

В Internet Explorer 6 не работает прозрачность в картинках с .png, хотя нормально работает с этими файлами без прозрачности.

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

10 фиксов, решающих проблемы Internet Explorer 6

Данный пост основан на переводе интересной англоязычной статьи «10 Fixes That Solve IE6 Problems«. Информация, изложенная ниже, будет полезна как начинающим верстальщикам, там и бывалым. Зеленым цветом я пометил пункты, содержимое которых полностью совпадает с моей точкой зрения и подтверждено моей практикой. Букв много, не пугайтесь =)

Так исторически сложилось, что браузер Internet Explorer 6, выпущенный аж 7,5 лет назад, до сих пор не дает себя забыть, все еще, к сожалению для практически любого веб-разработчика, являясь одним из самых популярных веб-браузеров. К сожалению — потому что поддержка веб-стандартов в нем далеко отличается от его следующих версий, а также других современных браузеров.

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

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

Всегда используйте запись, обозначающую тип HTML-документа (указывается в самом верху HTML-страницы). При этом тип документа Strict является рекомендуемым:

Несмотря на то, что рекомендован Strict, на практике пока довольно часто приходится использовать тип документа Transitional, как минимум по той причине, что Strict запрещает применение параметра _target , а многие используют его по привычке.

Применяйте position: relative .

Установка элементу position: relative решает множество проблем, особенно, если вы наблюдаете невидимые или странно выровненные блоки. При этом необходимо помнить, что все дочерние элементы с position: absolute станут позиционироваться относительно этого элемента.

Используйте display: inline для плавающих элементов (те, к которым применяется свойство float ).

У плавающих элементов, имеющих левый/правый отступ margin , в IE6 этот отступ удваивается. Т.е. если вы указали 5px, то в IE6 он будет 10px. Применение display: inline как раз решает данную проблему.

Придайте элементу свойство hasLayout.

Многие проблемы рендеринга в IE6 (и в IE7) решаются путем назначения элементу свойства hasLayout. Это настройка для IE, определяющая, каким образом ограничивать содержимое и располагать его по отношению к другим элементам страницы. Установка hasLayout может иметь существенное значение, если вам необходимо превратить строчный элемент (например, ссылку) в блок или применить эффекты прозрачности.

Самый простой способ установки hasLayout — это указание CSS-свойств height или width (также может быть использован zoom: 1 , однако это правило не является частью стандарта CSS). Т.е. рекомендуется устанавливать фактические размеры элемента: высоту или ширину, однако там, где это невозможно сделать, можно использовать правило height: 1% . Вот примерчик:


Довольно часто решить какой-либо баг в IE6 помогает одновременное использование правила position: relative и height:1% .

Устранение бага с повторяющимися символами.

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

  • применить ко всем плавающим элементам display: inline ;
  • применить margin-right: -3px к последнему плавающему элементу (если вы заглянете в исходники, создаваемые генератором CSS-макетов, то найдете, что в большинстве из них для блока сайдбара используется данное правило, как раз для решения этого бага);
  • поместить комментарий в самом конце плавающего блока, например: ;
  • поместить пустой

Используйте !important или современные селекторы.

Все еще возможно написать CSS-код конкретно под IE, не прибегая к хакам или условным комментариям. Например, минимальная высота реализуется следующим образом:

IE6 не понимает min-height и неправильно переопределяет высоту auto с помощью 20em . Тем не менее, он увеличивает размер, если содержимому требуется больше места.

Другой вариант заключается в использовании современных селекторов, например:

Избегайте процентных размеров.

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

Тестируйте раньше и тестируйте чаще.

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

Осуществляйте рефакторинг вашего кода.

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

Надеюсь, что данные подсказки найдут свою аудиторию, и тем, кто не знал про вышеописанные трюки, станет значительно легче справляться с сюрпризами Internet Explorer 6.

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

CSS хаки

Хак — специальная CSS конструкция, которую понимают одни браузеры и игнорируют другие. Использование хаков часто говорит о непрофессиональности верстальщика. Но встречаются случаи, когда хак — единственный способ решения проблемы (например общеизвестные баги браузеров (см «Глюки браузеров»)). Не стоит так же забывать, что в наше время спешка — обычное явление. Посему сроками «на вчера» — никого не удивишь. Вот и нет времени разбираться почему не выходит так как хочется.

Плюс хаков

Это быстрое решение проблемы. Прописали дополнительных строчек и все отлично, верстаем дальше.

Недостатки хаков
  1. Нет уверенности как поведет себя сайт с выходом новых версий браузеров. Например, написали код с хаком для Firefox, через месяц выходит новая версия Safari и оказывается она тоже воспринимает этот хак! Приходится переделывать.
  2. Многие хаки не проходят валидацию — опасность этого описана в предыдущем пункте.

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

Internet Explorer 11 zindex html/css bug

I have two outer div containers at the same level in the dom with the same z-index, but the first container overlaps the second. This only happens in IE11, its ok in Edge, Chrome and Firefox.

Can anyone suggest a workaround ?

Even when I set zindex in the second box to a higher amount, I still get the elements in the first box overlapping the second box, just the «tab» elements that is.

You’ll need IE to repro the problem

edit: you might need to go full page and then resize the window to see that the «Query Designer» tab overlaps the message div.

edit2: I forgot to save the fiddle so just changed the link to /2

Избавляемся от CSS хаков в Internet Explorer

Большинство вебмастеров — разработчиков сегодня делятся на два лагеря: первые предпочитают условные комментарии для отделения версий Internet Explorer друг от друга, вторые — CSS хаки.

Я не отношусь ни к одной из перечисленных групп. И вот почему.

Любители условных комментариев делают примерно так:

Сразу возникает несколько проблем:

  • Создаются лишние HTTP запросы
  • Пока браузер не получит содержимое файлов в условных комментариях, загрузка документа не продолжится
  • CSS правила получаются разбросанными по нескольким файлам, что затрудняет их поддержку и дальнейшую доработку


Любители же CSS хаков поступают проще:

В данном подходе также имеются свои недостатки:

  • Код получается невалидным
  • Хаки основаны на неверной интерпретации браузером правил CSS (т. е. они заведомо «ошибочны»)
  • Никто не знает чем обернется их использование в дальнейшем

Что делаю я?

Я использую симбиоз этих двух вариантов в таком виде:

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

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

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

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

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

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

Содержание

Веб дизайн : CSS ошибки браузера IE 6.0
Написал MACTEP в 25.07.2011 20:30:00 ( 1977 прочтений )
Раздел Баг/Фикс/Лучшее решение
Стратегии
  • Удельный вес 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, он совсем не исчерпывающий. Если Вы не смогли найти в нем что-то, посмотрите на эти дополнительные ресурсы.

    LygutaKsusha / Тестирование и отладка верстки под IE.md forked from codedokode/Тестирование и отладка верстки под IE.md

    Тестирование и отладка верстки под ИЕ

    Начнем с того, что надо писать не под «ИЕ», а номера конкретных версий. Каждая версия ИЕ по своим особенностям и багам напоминает отдельный браузер, под который надо подкладывать свои, отдельные костыли. И что хуже, MS иногда выпускает исправления багов, и мы имеем кучу пользователей, с разными версиями, с разными наборами сервис-паков и обновлений. И что еще хуже, в некоторых браузерах есть режимы совместимости, например ИЕ8 может отобразить страницу в режиме совместимости с ИЕ7, и — кто бы ожидал — при этом с другим набором багов, нежели настоящий ИЕ7.

    Вот плач тестировщика Яндекса по этому поводу: http://habrahabr.ru/post/201172/ (мне особенно нравится картинка из фильма про хоббитов — она очень хорошо выражает суть ситуации). Можете прочитать статью для осознания масштабов проблемы.

    Потому начнем изучение противника с версий.

    • IE12 (можно поставить на Win 7+) — не сталкивался с ним.
    • IE11 (включен в Win 8.1, можно поставить на Win 7+) — более-менее нормальный браузер, поддерживающий современные стандарты HTML 5, CSS 3
    • IE10 (включен в Win 8, ставится на Win 7+) — более-менее нормальный браузер, поддерживает HTML 5/CSS 3, кроме каких-то совсем новых вещей
    • IE9 (ставится на Win Vista+) — первый из ИЕ, который начал поддерживать HTML5/CSS3. Увы, поддерживает мало что, например text-shadow (тени у текста) нету. Ну хотя бы скругленные уголки есть — и на этом спасибо. Последний браузер, который поддерживает майкрософтовские фильтры (которыми можно имитировать недостающие тени и градиенты, например). Есть совсем немножечко багов, доставшихся видимо от предков. Но в общем, в сравнении с тем, что было раньше, неплохой браузер.
    • IE8 (включен в Win 7, ставится на Win XP+) — первый из ИЕ, который начал поддерживать HTML 4/CSS2.1 нормально без злостных багов (но немного мелких ошибок есть). Не поддерживает HTML 5/CSS 3 (круглые уголки, теги и все, что дальше), по нынешним меркам плох, но поверьте мне, после ИЕ7 и особенно 6 это был праздник — в кои-то веки верстка по стандартам отображается (почти) нормально! Сколько времени экономится! Часть вещей, вроде теней и градиентов, можно имитировать фильтрами.
    • IE7 (включен в Vista), IE6 (включен в XP) — жуткие монстры из фильмов ужасов, которые обещают даже опытному верстальщику не одну бессонную ночь. На словах они Львы Толстые поддерживают HTML4/CSS2.1, но на деле там такое количество багов и «особенностей», что половину свойств использовать невозможно, все разваливается и съезжает. 95% современных сайтов в них не отображается в принципе. Если тебе приходится верстать под них, то запасись успокаивающими препаратами или котом забудь про CSS3, используй только CSS2.1, самую примитивную верстку, самые простые css-свойства, все размеры и расположение элементов задавай фиксированным, никакой резины, никаких процентов, никаких сложных конструкций с флоатами, никаких width: auto. Может быть, у тебя что-то и получится.

    Для поддержки важно знать, сколько процентов пользователей использует ту или иную версию. Посмотреть статистику по России можно например тут (в других странах могут быть другие цифры): http://www.liveinternet.ru/stat/ru/browsers.html? >

    Обрати внимание, «баги» относятся не только к багам в поддержке CSS, но и в JS. Твой JS код на старых версиях ИЕ тоже может не работать.


    Браузер ИЕ глубоко интегрируется в систему, потому портабельных версий ИЕ нет. Откатить версию ИЕ на более старую можно только при установке ИЕ10 и выше, а например с ИЕ9 откатиться ниже уже нельзя. Возникает вопрос, как проверять сайт в нескольких версиях программы?

    Правильный способ — виртуальные машины. Берем тот же Virtual Box, создаем в нем нужное число машин, ставим в них ОС и нужную версию ИЕ (который можно скачать с сайта MS). Я использовал где-то 512 Мб памяти на машину и «облегченные» версии винды. Также, майкрософт выпускает готовые образы с уже установленными ИЕ разных версий: https://www.modern.ie/ru-ru/virtualization-tools

    Также, майкрософт предлагает (вроде бы бесплатно) получить доступ к IE в их облаке: https://remote.modern.ie/

    Плюс в том, что мы видим то же, что и пользователь с ИЕ. Минус — затраты времени на установку/запуск виртуальных машин. Тем не менее, серьезные компании и профессионалы используют именно этот способ.

    Другие варианты — программы вроде «multiple IE», которые включают в себя браузеры разных версий. С ними проще, но они обеспечивают недостаточную эмуляцию всех багов и особенностей ИЕ, и ты рискуешь либо пропустить баг, либо увидеть несуществующий.

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

    В начале твоего HTML-кода должен стоять доктайп ( http://htmlbook.ru/samlayout/rezhimy-brauzerov/doktaip ). Если ты не ставишь доктайп (или ставишь не в начале файла) — браузер думает, что перед ним древняя страница из 20-го века и переходит в quirks mode — режим совместимости с допотопным старьем. Для ИЕ это режим совместимости с ИЕ5 (ты читал, какой плохой ИЕ6? ну а тут будет ИЕ5).

    Проще всего поставить HTML5 доктайп (он самый короткий):

    Этого хватит, чтобы избежать перехода в quirks mode. Но этого недостаточно, чтобы избежать других ловушек вроде режимов «совместимости».

    Версии браузера, начиная с ИЕ8 имеют режимы «совместимости» с более ранними версиями. Если ИЕ покажется, что страница рассчитана на более старый браузер — он переключится в этот режим (например из ИЕ9 в ИЕ7 — естественно, с отключением поддержки HTML5 и с включением багов из ИЕ7). Причем, разумеется, отображение страницы в режиме совместимости с ИЕ7 не совпадает с отображением в настоящем ИЕ7.

    Поводов переключиться может быть много: в странице встречаются условные комментарии, сервер находится на твоем компьютере или в локальной сети (сюрприз, правда? одна и та же страница отображается по-разному в зависимости от того, на какой сервер выложена), сайт находится в волшебном списке майкрософт, пользователь нажал кнопочку переключения. Переключение в режим совместимости, естественно, сопровождается багами отображения, съехавшей версткой и другими радостями верстальщика.

    Вот алгоритм выбора режима совместимости для ИЕ8: http://blogs.msdn.com/b/ie/archive/2010/03/02/how-ie8-determines-document-mode.aspx (картинка в конце статьи). Как тебе?

    К счастью, есть способ запретить такое поведение. Сделать это можно 2 способами:

    В настройках веб-сервера или в приложении отдать заголовок X-UA-Compatible: IE=edge . В php это можно сделать командой header(«X-UA-Compatible: IE=edge»); , идущей до вывода самой страницы. Это надежный способ и работает в 99.9% случаев (кроме случая, когда пользователь нажал кнопку переключения режима). Вместо IE=edge можно писать желаемую версию ИЕ, которую нужно эмулировать, например, IE=7 , но эмулировать ИЕ умеет только более старые (и более глючные) версии. Зачем тебе такая радость?

    Добавить, как можно выше внутри , мета-тег:

    Это проще, так как не надо возиться с заголовками, но работает не всегда. Например,если ты использовал условный комментарий до мета-тега, то метатег проигнорируется (ИЕ переключится, верстка поедет).

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

    Баги и особенности ИЕ

    Особых багов нет. В ИЕ10 могут не поддерживаться какие-то совсем новые фичи CSS3/HTML5

    Первая версия, поддерживающая (частично) HTML5/CSS3, а также Javascript ES5 (это Object.create() , Array.forEach , Function.bind и другие).

    Проверять поддержку того или иного набора свойств удобно на caniuse, например: http://caniuse.com/#search=text-shadow

    Поддерживается только HTML4.01/CSS2.1. Это значит, нет круглых уголков, теней, растягивания фона и других прелестей CSS3. Это значит, что элементы из HTML5 вроде не отображаются и к ним не применяются стили (есть решение, смотри html5-shiv ниже).

    Зато CSS2.1 поддерживается неплохо, с небольшим количеством багов.

    Не поддерживаются нововведения Javascript ES5.

    Если кратко, то ИЕ6-7 работают по своим правилам, чем-то отдаленно напоминающие стандарты CSS2.1/HTML4. Если ты можешь избежать верстки под эти версии — избегай ее любой ценой.

    Способы борьбы с багами

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

    В ИЕ до 9 версии включительно можно использовать условные комментарии, чтобы вставить кусок HTML-кода только для определенных версий ИЕ (или наоборот скрыть от них): http://htmlbook.ru/samlayout/internet-explorer/uslovnye-kommentarii

    С их помощью, например, можно подключить отдельный css-файл только для ИЕ и писать в него исправления верстки.

    С помощью специальных конструкций можно сделать css-правила применимыми (или неприменимыми) для отдельных версий браузеров. Подробнее:

    В ИЕ (до версии 9) есть фильтры, с помощью которых можно частично имитировать полупрозрачность ( opacity ), тени ( box-shadow , text-shadow ) и градиенты из CSS3. Учти, что тут надо тщательно все тестировать, так как фильтры могут приводить к искажениям формы букв, картинок, «грязному» тексту, искажениям вида страницы и тормозам.

    Фильтры добавляются через css-свойства filter и -ms-filter (в ИЕ9). Это не те фильтры, что вводятся в новых стандартах CSS3, не перепутай (хотя свойства называются так же).

    Полифиллы и скрипты

    Для борьбы с проблемами ИЕ есть полифиллы и скрипты. Полифиллы добавляют поддержку фич из Javascript ES5.

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

    CSS хаки. Особенности кроссбраузерной верстки.

    Кроссбраузерность кода – основное требование для верстальщика практически в любой web-студии. Для достижения этой задачи есть масса способов. Главный из которых – тщательно продуманная структура документа. Однако, если структура html страницы сложна, или придумать структуру так, чтобы она одинаково отображалась во всех браузерах, не удалось, на помощь верстальщику приходят всевозможные css-хаки. Не претендую на оригинальность или уникальность подборки трюков в этой статье, но постараюсь описать как можно больше способов и инструкций по достижению кроссбраузерности.

    Основная головная боль верстальщика в 99,99% связана с браузерами от Microsoft, т.е. с Internet Explorer. Сайт, одинаково хорошо интерпретируемый Opera, Mozilla, Safari и Chrome, может выглядеть совершенно по-разному в Internet Explorer 8, Internet Explorer 7, не говоря уже о более ранних версиях.

    Наиболее красивое решение для обеспечения кроссбраузерности с Internet Explorer — использовать условные комментарии в HTML коде. Суть в том, что для каждой версии браузера создается свой CSS файл, в котором проблемные свойства определенным образом перезаписываются:

    Будет работать только в IE6 и ниже:

    Условие может быть таким: IE – для любой версии IE


    lt IE v – (less than) для всех браузеров IE, версия которых меньше чем v

    lte IE v – (less than or equal) для всех браузеров IE, версия которых меньше чем v, или такая же

    gte IE v – (greater than or equal) – для IE, версия которых больше или равна v

    gt IE v – (greater than) – для IE, версия которых больше v.

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

    CSS3 решения для Internet Explorer

    CSS3 – это, наверное, самая горячая тенденция в веб-дизайне на сегодняшний день, которая позволяет дизайнерам встраивать различные элементы и решения в свои проекты посредством простенького CSS и избегая применения несемантической разметки, дополнительных изображений, и сложных элементов javascript.
    К несчастью, ни для кого не секрет, что Internet Explorer (даже самые свежие версии) до сих пор не поддерживает большую часть функций, которые включает в себя CSS3.

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

    Но бывают случаи, когда заказчик настаивает на том, чтобы в проекте присутствовали кросс-браузерные решения, которые бы работали даже в IE6. Для таких случаев мы собрали подборку опций, которыми разработчики могут воспользоваться именно в тех случаях, когда требуется внедрить CSS3, но и тем временем сохранить функциональность в браузерах без поддержки (IE6, 7 и 8).

    Opacity (Уровень плотности/Прозрачность)

    Нам кажется, что многие разработчики недоумевают, почему Internet Explorer до сих пор не поддерживает эту очень распространенную функцию. Она уже настолько приелась всем, что мы порой забываем о том, что это функция CSS3. Хотя IE и не поддерживает конкретно эту функцию, в нем можно реализовать нечто очень схожее:

    Вам нужна, по сути, только вторая линия, которая работает во всех трех версиях Internet Explorer. Но если по каким-то причинам вам требуется применить эту функцию только в 8-й версии IE (не в 6 и 7), то вы можете применить только третью строку, которая не работает в более ранних версиях.

    Значение прозрачности на конце строчки для каждого браузера работает по тому же принципу, что и значения уровня плотности, от 0 до 100 (правда, значение уровня плотности выставляется двумя цифрами от 0 до 1). Также следует отметить, что значения уровня прозрачности (даже при стандартном способе) будут наследоваться всеми дочерними элементами, так как для них не существует отдельных параметров настроек.

    * Параметры фильтра относятся только к Microsoft, так что ваш код CSS нельзя считать валидным
    * Что касается значения уровня прозрачности, то в фильтре для Internet Explorer все дочерние элементы наследуют параметры.

    Border-radius (Закругленные углы)

    Параметр border-radius (больше распространен как закругленные углы в CSS3) – является еще одной распространенной функцией CSS3. Этот параметр позволяет разработчикам избежать головных болей по поводу позиционирования дополнительных элементов посредством javascript. Но опять же, Microsoft даже тут не хочет сотрудничать, и Internet Explorer не поддерживает эту функцию.

    К счастью, существует как минимум одно решение, которое можно применить к разметке IE. Ремиз Ранас из HTML Remix создал HTC-файл под названием CSS Curved Corner , который можно скачать на Google Code .

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

    Вот так должен выглядеть ваш код:

    Оно работает довольно просто, как показано выше. Хотя, в идеале вы можете применить значение только в CSS для IE, используя тот же селектор в вашем CSS так, чтобы код понимал, откуда брать значение радиуса.

    Так как этот способ требует отдельного файла HTC, вы можете посмотреть демо здесь .

    * HTC-файл представляет собой 142 линии (оптимизация или GZip-сжатие может поспособствовать)
    * Параметр поведения сделает ваш CSS невалидным
    * Вашему серверу нужна возможность подгрузки HTC-файла для того, чтобы этот способ работал
    * В IE8, возможно, в некоторых случаях возникнут проблемы, если HTC-файл будет принуждать кривой элемент принимать отрицательное значение z-index

    Box Shadow (Тень блоков)

    Параметр box-shadow – это еще одна CSS3-функция, которая позволяет применить искривленные тени к элементам, которые используют параметры border-radius. IE не поддерживает box-shadow, но существует фильтр, который примерно заменяет эту функцию.

    Следует отметить, что параметр box-shadow должен быть удален из модулей CSS3 Backgrounds и Borders , так что, скорее всего, CSS3 в будущем немного будет отличаться от того, какой он есть сейчас.

    Как показано выше, в дополнение к параметрам WebKit и Mozilla, вы можете применить фильтр тени, который будет работать во всех версиях Internet Explorer.

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

    Text Shadow (Тень текста)

    Этот метод уже многие годы практикуется как для печатной продукции, так и для веб-дизайна. Что касается стороны веб, тут все выполняется значительно проще, за счет изображений, или дублирования и позиционирования текста. CSS3 позволяет разработчикам с легкостью добавлять тень к тексту при помощи простой функции text-shadow.

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

    Для начала, в вашем CSS нужно выставить значение text-shadow:

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

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

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

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

    Так как этот способ требует применения библиотеки jQuery и внешнего файла плагина, вы можете ознакомиться с демо прямо в сети.

    Существуют некоторые факторы, которые могут сильно повлиять на желание применять этот метод. Возможно, вам будет гораздо удобнее сделать тень посредством изображения.

    * Для того чтобы тень в IE выглядела так же, как и в других браузерах, вам придется применять различные настройки CSS для IE, что требует временных затрат на разработку и поддержание работы
    * Также требуется добавить библиотеку jQuery, и файл плагина, который представляет собой 61 строчку кода (Gzip-сжатие может поспособствовать)
    * Тень в IE никогда не будет выглядеть так же, как в других браузерах
    * Когда вы применяете заменяющие параметры, плагин иногда генерирует лишнее, что может привести к отпугивающей огромной тени, из-за того, что старые параметры не были изменены
    * В отличие от версии CSS3, плагин не поддерживает несколько теней сразу
    * По некоторым причинам, ради работы в 8-й версии IE, вам придется задавать значения z-index

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

    Для того чтобы получить градиент, который будет одинаково выглядеть во всех браузерах, включая все версии Internet Explorer, используйте код CSS, представленный ниже (последние две строки для IE):


    Для фильтров IE, GradientType можно выставить на ‘1’ (горизонтальный) или ‘0’ (вертикальный).

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

    * Ваш CSS-код не будет валидным, хотя это также относится к значениям браузеров семейства WebKit и Mozilla
    * Для IE8 нужен другой код, что требует временных затрат
    * Градиенты в WebKit и Mozilla позволяют объявлять ограничения; чего нельзя отнести к градиентам в IE, что понижает уровень гибкости
    * Фильтр IE не позволяет объявлять радиальные градиенты, которые поддерживают браузеры WebKit и Mozilla
    * Для того чтобы градиенты были видны в IE, элемент градиента должен иметь шаблон

    Transparent Background Colors (RGBA) (Прозрачные фоновые цвета)

    CSS3 предлагает еще один способ внедрения прозрачности, на этот раз посредством альфа канала, который указан в качестве фонового цвета. IE не предоставляет поддержки даного метода, но это можно реализовать другим путем.

    Вот код альфа канала фона для браузеров, совместимых с CSS3:

    С кодом CSS, предоставленным выше, фоновый цвет будет установлен в RGB-значениях + опциональное значение «alpha» ‘.4’. Для отображения этого в IE, вы можете воспользоваться соответствующим фильтром для создания градации с теми же значениями начального и конечного цветов, а в поддержку со значением прозрачности. Это должно быть включено только в CSS для IE, который заменит предыдущие параметры.

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

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

    * Параметры фильтра не являются валидным кодом CSS
    * В CSS-коде для IE требуется дополнительная строка кода
    * Элементу нужна разметка

    Примечания: Первоначально мы использовали метод с изображением PNG для достижения данного эффекта, но это работало только в IE7-8, а для IE6 требовался специальный хак. Затем мы попробовали другой метод, и поняли, что он работает лучше. Способ с PNG – это еще один способ, но с ним может возникнуть больше проблем, и у него гораздо больше побочных эффектов.

    Multiple Backgrounds (Несколько фонов)

    Еще один метод CSS3, который внес огромный вклад в развитие CSS. На данный момент эту функцию не поддерживают только Opera и IE. Но интересно то, что IE, вплоть до версии 5.5, поддерживает встраивание нескольких элементов в один элемент посредством фильтра.

    Вы можете продолжать применять хак для IE6, и увидите что изображение отображается дважды, что вам придется решать посредством добавления параметра background: none, а затем применять фильтр. Следуя тому же принципу, IE позволяет использовать 2 изображения в качестве фона одного элемента.

    Для того чтобы применять несколько фоновых изображений в Firefox, Safari и Chrome, используйте следующий код CSS:

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

    Блок, представленный ниже, отображает несколько изображений в Chrome, Firefox и Safari (правда, вы ничего не увидите в IE):

    Следующий блок отображает несколько изображений в IE6-8 (но в других браузерах вы увидите только одно изображение):

    * Ваш код CSS не будет валидным
    * Второе изображение применяется посредством параметра фильтра, и будет всегда отображено в левом верхнем углу. Вы не сможете повторить его, так что этот способ не особо гибкий, и может быть применен только в некоторых случаях
    * Для того чтобы центрировать элемент (как в других браузерах), вам нужно создать изображение с точным белым промежутком. Таким образом, вы сможете имитировать центрирование (как показано в примере)
    * Фильтр AlphaImageLoader может вызвать проблемы в работе

    Element Rotation (Трансформации CSS) (Вращение элемента)

    CSS3 предоставляет несколько функций по трансформации и анимации. Также существуют способы вращения элементов в IE, хотя такое и редко встречается.

    Для того чтобы повернуть элемент на 180 градусов (перевернуть вертикально), требуется следующий код CSS3:

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

    Значение вращения могут быть 1, 2, 3 или 4. Эти цифры означают 90, 180, 270 или 360 градусов перспективного вращения.

    Элемент, отображенный ниже, отображается в перевернутом состоянии в Internet Explorer, так как он перевернут на 180 градусов посредством параметра фильтра. Для того чтобы продемонстрировать это более наглядно, мы применили 3 пикселя толщины для «нижней» границы, которая теперь отображается вверху элемента.

    * Ваш код CSS не будет валидным, хотя это касается также кода браузеров из WebKit и Mozilla
    * Браузеры Webkit и Mozilla позволяют вам вращать элементы по конкретному градусу, а фильтр для IE имеет только 4 значения, что значительно сокращает гибкость

    Вдобавок: IE позволяет вам вращать элементы с той же гибкостью, как это позволяет CSS3. Сложно объяснить на примере, но CSS3, примененный в проекте Пола Айриша показывает нам, что мы можем пользоваться кодом, совместимым с IE, в случаях с вращением CSS3.

    Вероятно, многие разработчики нас возненавидят за эту подборку, так как некоторые клиенты настолько умны, что могут вбить в строку поиска решения для Internet Explorer, а потом тыкать сюда разработчикам. Так что, будьте внимательны относительно того, что вы говорите своим клиентам. Хотя IE и не поддерживает данные функции на самом деле, это еще не означает, что это невозможно.

    И запомните, что каждый раз, когда вам нужно переписать исходные параметры CSS для IE, или если вам придется воспользоваться javascript, jQuery или каким-либо HTC-файлом, вам нужно ссылаться на внешние ресурсы. Это гарантирует вам то, что другие браузеры не будут делать лишние и ненужные запросы.

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

    Вам понравился материал? Поблагодарить легко!
    Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

    Решение реальных проблем с помощью CSS Gr > Дата публикации: 2020-01-31

    От автора: недавно я столкнулся с адаптивным дизайном, который выглядел сложным в плане измененного порядка элементов и макетов для разных областей просмотра. Этот новый дизайн выглядел сложным, пока мы не рассмотрели его в контексте CSS Grid и FlexBox.

    Проблемой здесь может стать поддержка Internet Explorer 11 и Safari 9+.

    После того, как мы рассмотрим сложности дизайна, мы покажем, какой CSS нужен для поддержки современных браузеров, а потом добавим поддержку IE и наконец применим это в работе с Safari 9 + 10.0.

    Дизайн

    Практический курс по верстке адаптивного сайта с нуля!

    Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

    Адаптивные макеты для стационарных компьютеров, мобильная версия A и мобильная версия B

    Выглядит весьма незатейливо, но нужно сделать несколько примечаний:

    Вариант товара меняет порядок

    CTA должны соответствовать друг другу

    CTA должны находиться ниже цены

    CTA не должны перекрывать любую область «текста предложения»

    CTA должны находиться ниже изображения (вариант А)

    Создание сетки CSS

    Разделяем карточки на различные области.

    Адаптивные макеты с наложенными сетками

    Некоторые моменты из спецификаций мы не могли использовать, а именно: grid-column-gap и named grid columns, поскольку их не было в оригинальной структуре и Internet Explorer их не поддерживает.

    Mobile Grid Layout

    Это достаточно незатейливый макет сетки. Единственное примечание – область d также использует flex и space-between, чтобы разместить кнопки по углам.

    Цукерберг рекомендует:  Интерактивное Drag&Drop оформление страницы
    Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих