Html — HTML png и IE


Содержание

PNG-прозрачность в IE 5.5-6

Сегодня мы поговорим о прозрачности в формате PNG. PNG реализует прозрачность через альфа-канал, что позволяет задавать различные степени прозрачности пикселей изображения. Многие браузеры умеют работать с данным форматом и поддерживают его прозрачность: IE 5.5-6, Mozilla 0.9+ (Firefox, Netscape 6+ . ), Opera 6+, Konqueror 3+, Safari 1.0+ . Однако скажем спасибо IE, который не желает быть как все и не даёт нашему брату расслабиться .

Суть проблемы

**Если вам некогда или незачем вникать в суть проблемы и метода её решения переходите к пункту «Пошаговые инструкции».

Так в чем собственно проблема? А проблема в том, что Internet Explorer 5.5 — 6, умея обрабатывать PNG-прозрачность, не делает этого просто так (более ранние версии IE не в состоянии использовать прозрачность вообще, НО все это не имеет отношения к Macintosh Internet Explorer 5.0+, в нем все ok). Изображение расположенное ниже слева демонстрирует правильное отображение PNG файла с прозрачностью, а изображение справа от него показывает как будет выглядеть картинка в IE5.5 — 6 по умолчанию (а в IE более ранних, всегда так как на второй картинке):

Для того, чтобы Internet Explorer5.5-6 стал учитывать альфа-канал PNG необходимо задействовать фильтр AlphaImageLoader.

* Фильтры поддерживает только IE.

Фильтр AlphaImageLoader

Фильтр AlphaImageLoader позволяет отобразить изображение в границах объекта между фоном и содержимым этого объекта. При этом, если используется изображение в формате PNG, то задействуется его alpha-канал (а именно это нам и нужно).

* AlphaImageLoader доступен начиная с IE5.5

Установить фильтр можно через стили или через скрипт:

Параметры фильтра AlphaImageLoader: аргумент src определяет адрес, по которому расположено изображение, а аргумент sizingMethod говорит что делать, если изображение не соответствует размерам элемента в который оно загружается и имеет 3 возможных значения: crop (обрезать изображение если оно больше размеров объекта родителя), image (увеличить или уменьшить объект по размеру изображения; значение по умолчанию) и scale (изменить масштаб изображения по размеру родителя).

Следует отметить, что фильтр требует, чтобы у элемента, к которому он применяется, было задано или свойство height, или width, или position со значением absolute, или writingMode со значением tb-rl, или contentEditable был установлен в true.

Так же нужно понимать разницу между фильтром и обычным фоном, если у фона есть свойства такие как: background-position, background-repeat, background-attachment, то у фильтра их НЕТ!

Решение проблемы

Так. Что мы имеем? Есть браузеры которые сами по себе делают все как надо, и встречая их мы ничего не делаем, используем изображение как обычно, а есть IE5.5-6 для которого нужно использовать фильтр AlphaImageLoader. Причем, мало просто загрузить изображение фильтром, также нужно убрать основное изображение, которое воспроизводиться IE без прозрачности и будет мешать отображаться правильному изображению.

Рассмотрим два случая: первый — изображение представлено тэгом IMG, второй — изображение является фоном какого-то элемента. В обоих случаях нужен фильтр AlphaImageLoader, но в случае тэга IMG нужно избавиться от содержимого элемента (переднего плана) , а во втором случае, нужно избавиться от фона.

Хорошо! От фона избавится весьма просто, задав свойству background-image значение «none». Но как избавиться от основной картинки тэга IMG? Единственный выход, к сожалению, это заменить исходное изображение прозрачным однопиксельным gif-ом, тогда сквозь него мы увидим png-картинку, загруженную фильтром. Для этого нужно соответственно создать этот прозрачный однопиксельный gif, и сохранить на сервере.

Что делать теоретически, вроде понятно. Теперь как все вышесказанное реализовать конкретно в виде кода, да так чтобы эта реализация оказалать максимально простой в использовании? А вот так. На странице в разделе head указываем следующий CSS-стиль:

В качестве селектора указываете любой CSS селектор. Селектор определяет в каких элементах страницы будут искаться и корректироваться PNG изображения. Однако, если что такое CSS-селектор понятно, то что за «зверь» expression( fixPNG(this) ) могут понимать не все. Но давайте по отдельности разберем это выражение, мухи отдельно, котлеты отдельно. Вначале разберемся с конструкцией expression().

expression() вычисляет выражение внутри скобок и возвращает полученное значение в качестве значения css свойства, к которому эта конструкция применялась. Данная конструкция работает только в IE5.0+, другие браузеры её игнорируют.

CSS_свойство: expression( выражение)

, где выражение — это валидная строка кода на Javascript или VBSCript.

Элемент DIV в примере всегда будет находиться в левом верхнем углу окна браузера, потому что свойству top всегда будет присваиваться новое значение, в зависимости от «проскроллености» страницы.

*Более подробно о конструкции expression читайте в документации.

Так, теперь понятно. Конструкция expression( fixPNG(this) ) вызывает функцию fixPNG, а в качестве аргумента ей передается объект к которому в данный момент применяется стиль. Как уже ясно, эта функция и выполняет всю работу по коррекции. Рассмотрим код этой функции:

Код достаточно прост и прокомментирован, однако поясню один момент, а точнее строку кода:

if (src) element.runtimeStyle.filter = «prog ;

Эта строка «затирает» начальное значение свойства filter элемента, а именно происходит замена expression( fixPNG(this) ) на простой вызов фильтра AlphaImageLoader. При этом нет нужды возвращать какое либо значение из функции. Сделано это с целью предотвратить постоянные вызовы конструкцией expression() функции fixPNG, это просто не нужно и к тому же экономит ресурсы компьютера.

Тут знатоки особенностей браузера Internet Explorer могут сказать: «Так здесь в самый раз воспользоваться конструкцией «behavior», она и код единожды запустит, да выглядит чуть компактнее. Но behavior не подходит и вот почему: вызов «поведения» происходит после отображения объекта страницы, и поэтому вначале появится изображение без прозрачности, а лишь после будет подкорректировано (что визуально заметно пользователю). Это выглядит некрасиво.

Пошаговые инструкции

Как заставить IE показывать прозрачность? Сперва скопируйте и сохраните в корне своего сайта прозрачный однопиксельный gif и javascript-файл fixpng.js. Затем на своей странице между тэгами добавьте это:

Если не понимаете для чего нужны первые и последние две строки то вам сюда: «Определяем тип и версию браузера с помощью HTML комментариев».

Если вы НЕ используете PNG в качестве фона, то это все. Если же используете png в качестве фона, то установите аттрибут в элементах с PNG-фоном.

Почему не работают ссылки на PNG фоне в IE?

Важно знать, что если применить фильтр AlphaImageLoader к элементу внутри которого находятся ссылки, то эти ссылки перестают работать. Т.е. та часть ссылки, которая находиться на непрозрачной области PNG картинки, ведет себя как обычный текст. Для того, чтобы решить данную проблему, следует установить этим ссылкам относительное позиционирование position: relative . В примере выше («Пошаговые инструкции») это реализовано как .iePNG A < position: relative; >. Однако, нужно учесть, что при этом элемент к которому применен AlphaImageLoader-фильтр не должен быть спозиционирован ни абсолютно, ни относительно (т.е. у него не должно быть position: absolute или position: relative ), иначе ссылки все равно не будут работать. Для того чтобы заставить работать ссылки в блоке с фильтром и позиционированием нужно разделить позиционирование и фильтр: следует создать внешний блок к которому применить позиционирование, а во внутреннем блоке установить фильтр.

* Все вышесказанное имеет такое же отношение и к элементам формы.

Почему PNG темнее в IE?

В IE есть ещё одна «особенность» (а прямо говоря — корявость) связанная с отображением PNG (PNG24), проявляющаяся в более темном отображении изображения. Причиной этому служит записанная в файл изображения дополнительная информация о гамма коррекции (chunk gAMA) (например, тот же Photoshop добавляет эту информацию). Для решения проблемы нужно «почистить» PNG-файл от gAMA chunk. Сделать это просто с помощью утилиты pngout (использовать так: pngout.exe in.png out.png). Так же можно воспользоваться и утилитой TweakPNG.

PNG в IE7 + CSS прозрачность (opacity)

Хоть в IE7 и появилась поддержка PNG-24 с 8-битным альфа-каналом прозрачности, однако она не лишена сюрпризов. Если к полупрозрачному PNG изображению применить CSS свойство opacity (прозрачность), то полноценный 8-битный альфа-канал превращается в обычную 1-битную прозрачность (такую как в GIF или PNG-8): полностью прозрачные пикселы изображения так и остаются полностью прозрачными, а остальные накладываются на черный фон и конечно перестают быть прозрачными вообще. Для того чтобы избежать этого нужно как и раньше использовать старый добрый фильтр AlphaImageLoader. Ещё отмечу, что в IE7 так и не появилась нормальная CSS прозрачность (свойство opacity), а по прежнему используется фильтр Alpha DirectX.

Wiki-учебник по веб-технологиям: CSS/КроссбраузерностьCSSХаки .

Когда CSS используется не только для оформления текста, но и для работы со слоями при бестабличной верстке, необходимо помнить, чт осовременные браузеры не одинаково трактуют такие важные параметры как margin — внешний отсутп элемента, padding — внутренний отступ элемента, а также параметры position — положение, float — обтекание текстом и ряд других.

Из-за этих различий в трактовке значений параметров, часто случается, что сайты и веб-интерфейсы, которые нормально смотрятся в браузерах Mozilla Firefox, Opera и Safari, вдруг начинают разъезжаться в браузере Internet Explorer.


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

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

Оглавление документа

CSS для IE 5, 5.5, 6, 7

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

Браузеры IE давно поддерживают так называемые условные комментарии (Conditional Comments), которые позволяют делать контент видимым только для IE. Условные комментарии – это просто специальным образом сформированные HTML комментарии, которые понимают только определенные версии Internet Explorer’a для Windows. Для примера вы можете использовать условные комментарии для исправления бага прозрачности PNG в IE.

Для их использования нужно :

  1. Сначала создать общую таблицу стилей для всех браузеров, без каких-либо хаков, чтобы потом продолжить работу по исправлению ошибок при отображении страницы в IE.
  2. Потом таблица стилей с исправленными ошибками сохраняется отельно и становится таблицей стилей для всех версий IE (например, all-ie.css).
  3. Сохраните отдельно таблицы стилей с исправлениями ошибок отдельно для каждой версии IE (например, ie-5.0.css).
  4. Далее необходимо последовательно подключить эти таблицы стилей через HTML-код с помощью условных комментариев.

Синтаксис условных комментариев

Приведенный условный комментарий будет понят браузерами IE5, IE5.5 и IE6, а также IE7 и IE8:

Применение CSS для IE5

Если вам необходимо применить условный комментарий только для IE5, то необходимо просто указать версию 5.0 в условии if IE 5.0:

Применение CSS для IE5.5

Если необходимо применить относительно IE5.5, то это будет выглядеть так:

Применение CSS для IE6

То же самое для IE6:

Применение CSS для IE5 и IE5.5 одновременно или для нескольких версий

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

Первый пример подключит таблицу стилей к любой версии Internet Explorer’а первая цифра которой 5:

В качестве альтернативы, можно указать, чтобы таблицы стилей подключались к любой версии браузера, номер которой меньше 6-ти:

Вместо lt (less then — меньше) можно также использовать lte (less then or equal to — меньше или равен), gt (greater then — больше), gte (greater then or equal to — больше или равен) главное при всем этом многообразии возможностей правильно выбрать порядок указания условных комментариев, чтобы не попасть в ситуацию, когда для некоторых браузеров группы условных комментариев пересекаются, давая неожиданный результат.

Порядок использования

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

Другие достоинства этого метода

Валидность

Отладка условных комментариев

Существует одно предупреждение, о котором стоит упомянуть.

Если вы используете несколько версий Internet Explorer’а на одной машине, то все эти версии будут выдавать себя за самую новую из установленных версий. Это означает, что если вас установлен IE6, но вы просматриваете страницу с помощью IE5, выполниться этот условный комментарий:

А этот условный комментарий не выполниться:

Для наиболее точного отслеживания различий в обработке CSS разными версиями IE хорошо себя зарекомендовала бесплатная программа IETester, которая поддерживает все версии IE от 5 до 8. А для быстрого изменения праметров CSS в IE8 по нажатию F12 доступно средство разработчика, напоминающее FireBug в Mozilla Firefox.

Аналогично объявлению таблиц стилей, этим способом можно скрывать HTML код от определенной или всех версий IE. Например, надпись «HTML-код» будет отображаться во всех браузерах кроме IE6, если поместить её в условный комментарий следующим образом:

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

Аналогично условным комментариям в IE 5—IE 8 поддерживается тег . . Этот тег позволяет скрыть информацию от пользователей IE, таким образом код:

пользователям IE будет показан как: Это браузер Internet Explorer, а пользователям других браузеров — Это не браузер Internet Explorer.

CSS хаки IE

Чтобы не загромождать HTML-код объявлением нескольких таблиц стилей или, если требуется сохранить единственный CSS-файл можно написать отдельные стили, которые будут работать только в IE. Причем, есть вариант как для IE6, так и для IE7.

Для IE всех версий. Если поставить перед свойством две наклонные черты ( // ), оно будет восприниматься лишь браузерами IE всех версий. Другие браузеры такое свойство проигнорируют.

Для IE6 существует возможность поставить минус (-) или нижнее подчеркивание (_) перед свойством, при этом IE7 не отреагирует на него. Можно также использовать конструкцию:

Цукерберг рекомендует:  Help - Помогите найти ошибку

В этом случае фон будет красным в браузерах Opera и Firefox, зеленым в IE7 и синим — в Internet Explorer 6.

В примере меняется цвет фона для разных браузеров. На практике же этот метод используется для того, чтобы добиться идентичности отображения и кроссбраузерности. Чаще всего приходится прибегать к нему при позиционировании и задавать разные значения свойств типа left, top, padding, margin, width и других, связанных с размерами, процентами и пикселами.

Для IE7 используется CSS хак:

CSS для Firefox

Также существуют специальные CSS хаки, позволяющие показывать стили только браузеру Firefox.


Для быстрого изменения праметров CSS в Firefox по нажатию F12 доступно (требует предварительной установки) средство разработчика Firebug — является лучшим среди аналогов.

CSS для Opera

CSS хаки для браузера Opera представлены следующими примерами:

или (но эту конструкцию видят и современные Mozilla Firefox)

Чтобы было видно только браузеру Opera версии от 10 и выше (на более ранних не тестиорвалось) надо писать так:

можно загрузить целый css, как это делали для IE:

и, наконец, можно воспользоваться /Java Script, в котором загрузить нужные таблицы стилей:

Для быстрого изменения праметров CSS в браузере Opera также доступно средство разработчика. Для его открытия надо перейти в меню «Инструменты» — > «Дополнительно» — > «Средства разработки».

Очередной блог фрилансера

коротко и полезно о веб-разработке

Полное руководство по укрощению IE6

На протяжении многих лет, Internet Explorer 6 (IE6) был несчастьем для веб-разработчиков во всем мире. Разработчики и пользователи стали использовать более предсказуемые, соответствующие стандартам, современные браузеры, такие как Firefox, Opera и Safari. Между тем, IE6 продолжает преследовать наши дизайны, скрываясь в темных местах, а умирает мучительно долго, в агонии. Поскольку мы ожидаем наступление того великого и светлого дня, когда IE6 окончательно умрет, так же как Netscape 4, давайте вспомним о некоторых пользователях, которые, по различным печальным причинам, продолжают мучиться с этим ужасным браузером.

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

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

Использование условных комментариев для IE6

Условные комментарии играют важную роль в нормальном поведении IE6. Условные комментарии это небольшие фрагменты кода, которые включаются в вашу (X)HTML разметку, что позволяет вам направить или отфильтровать определенные версии Internet Explorer. Далее пример условного комментария, которые перенаправляет IE6 специальным сообщением:

Это очень полезный метод добавления кода и контента только для IE6. Другие браузеры, увидев этот условный комментарий, определят его как обычный (X)HTML -комментарий и просто проигнорируют его. Таким образом, когда мы адаптируем наши веб-страницы для IE6, условные комментарии позволят нам применить специальные CSS-стили, без вмешательства в остальные браузеры. Хотя условные комментарии являются изобретением Microsoft, они являются лучшим хаком для конкретных версий Internet Explorer.

Простейший способ использования условных комментариев для направления и применения стилей только для IE6 – это подключить CSS-файл только для IE6, в секции ваших веб-страниц:

Затем, в файле ie6.css, мы можем разместить все IE6-хаки и другие уловки, требующиеся этому браузеру. Это позволит нам объединить все IE6-стили в один CSS-файл, который будет полностью игнорироваться другими браузерами. С таким методом применения стилей к IE6, нет необходимости в использовании IE6-хаков, так называемый «star-HTML» хак, или хак с подчеркиванием.

Направление и фильтр IE6 c «встроенными» CSS-хаками

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

К счастью, с появлением IE6, этих встроенных CSS-методов появилось достаточное количество. Через несколько лет, некоторые из этих «хаков» поднялись в топе, оказавшись чрезвычайно полезными и эффективными для применения к IE6. Наверное, самый распространенный из таких встроенных CSS-приемов, хак под названием «star-HTML»:

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

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

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

Другие полезные методы направления и фильтрации IE6, включают хак !important , который очень удобно использовать когда вам нужно отменить значение свойства для IE6:

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

Включение поддержки альфа-прозрачности у PNG

Одним из самых печальных дефектов в IE6, является отсутствие поддержки 32-битной альфа-прозрачности у PNG-изображений. При отображении в браузере 32-битных альфа-прозрачных PNG, IE6 заменяет всю прозрачность на безобразный серый фон. К счастью, это хорошо известная и часто встречаемая проблема, для которой существует большое количество обходных путей и решений.

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

Наиболее практичным подходом будет использование 8-битного, альфа-прозрачного формата PNG, вместо обычного 32-битного формата. Чтобы его получить, используйте программу Adobe Fireworks (Photoshop этого не умеет), сохраните свое альфа-прозрачное PNG-изображение в 8-битном формате, и затем включите в свой дизайн, как обычно. 8-битные PNG, возможно, не так красиво выглядят как 32-битные версии, зато в IE6 они будут выглядеть, так же как и в других браузерах. Этот метод позволяет вам применять альфа-прозрачность во всех современных браузерах, без получения уродливого серого фона в IE6.

Конечно, есть возможность включить в IE6 поддержку 32-битной альфа-прозрачности. Существует множество различных скриптов, включающих такую функциональность, но все они основываются на разработке Microsoft, фильтре AlphaImageLoader , который можно включить в ваш CSS-файл следующим образом:

Чтобы заставить это работать, вам понадобится скачать эти два файла, и расположить их в той же папке, что и ваш CSS-файл. Первый файл – это прозрачное gif -изображение, и второй файл это HTC -скрипт, предоставляющий IE6 (и ниже) функциональность, которая требуется для 32-битной альфа-прозрачности. Это базовая реализация фильтра AlphaImageLoader , более расширенная функциональность также возможна, с использованием большого количества бесплатных скриптов. Вот некоторые из моих любимых:

Исправление полей и отступов

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

В современных браузерах, высота и ширина этого блока, будет рассчитана в соответствии со спецификацией W3C как 100px + 20px +20px = 140px . В ранних версиях IE, несмотря на это, и высота, и ширина, будет ошибочно рассчитана в 100px . Это различие отвечает за разработку множества несоответствий между соответствующими стандартам браузерами и старыми версиями Internet Explorer.

К счастью, неправильная модель боксов была пересмотрена в IE6, который оказался способен возвратить правильную ширину для веб-страниц, включающих полный DOCTYPE . Когда присутствует полный DOCTYPE , IE6 включает один из двух «поддерживающий стандарты режим» или «почти поддерживающий стандарты режим», оба этих режима, позволяют IE6 правильно интерпретировать боксовую модель. Если же полный DOCTYPE не включен в веб-страницу, IE6 вернется в «quirks mode», и будет интерпретировать боксовую модель неправильно.

Таким образом, проблема боксовой модели легко решается в IE6, путем включения полного DOCTYPE и дальнейшей работы в стандартном режиме. Но если вам вдруг понадобится поработать в режиме quirks mode, простейший способ избежать применения внутренних отступов и рамок к элементам — задать им точную ширину. Вы всегда можете применить внутренние отступы и/или поля к закрытым элементам.

Несмотря на эти решения, могут возникнуть ситуации, когда необходимо точно контролировать высоту и ширину конкретных элементов. В этих случаях, мы можем использовать для этого «Tan Hack»:

В первом наборе правил, мы применяем ширину и высоту в качестве обычных значений, для соответствующих стандартам браузеров. Затем, во втором наборе правил, мы просчитываем неправильную боксовую модель в IE5 и IE6, в режиме quirks mode , путем корректировки значений высоты и ширины, включая дополнительные отступы и ширину рамки.

Установка min-width/max-width и min-height/max-height

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

Конечно же, этот способ слишком простой для Internet Explorer, который абсолютно не понимает эти базовые CSS-свойства. К счастью, IE поддерживает свой собственный, проприетарный атрибут expression (выражение), который позволяет нам использовать JavaScript-выражения для управления свойствами (X)HTML -документа, такими как max/min-width и max/min-height . Например, для того, чтобы указать значение width с помощью атрибута expression , нам нужно написать следующее:

…Что эквивалентно этому


Существует два минуса в использовании атрибута expression . Во-первых, поскольку выражения, по сути являются JavaScript-ом, они не будут работать с отключенным JavaScript-ом в браузере пользователя. Во-вторых, использование CSS-выражений для свойств min/max , очень ресурсоемко и может отрицательно повлиять на производительность браузера. Однако не стоит забывать, что свойства max/min-widths/heights являются важным инструментом в работе веб-дизайнера. Так что, принимая во внимание эти факторы, смотрите далее некоторые полезные CSS-выражения, включающие полную функциональность min/max в IE6.

max-width

min-width

max-height

Хорошая новость в том, что мы можем пропустить безумные JavaScript/CSS выражения, когда применяем минимальную высоту в IE6. Благодаря Dustin Diaz, мы можем установить min-height в IE6, с этим фрагментом CSS:

min-height

Устраняем баг с двойными полями

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

..IE6 (обычно) удвоит размер поля до 20px , без каких-либо оснований. Нет нужды говорить, что это баг двойных полей разрушил множество прекрасных дизайнов, вызывая боль и страдание разработчиков.

К счастью этот баг легко убить. Просто изменить тип отображения элемента, к которому применяется float , с типа block на тип inline , следующим образом:

Это решает баг с двойными полями 99% случаях. В тех же случаях, когда это решение не помогает, вы можете обойти эту проблему, путем удаления полей и установки внутренних отступов у родительского элемента, или непосредственно у элемента, к которому применен float .

Чистка потока

Чистка потока от флоатов – другая общеизвестная задача, не только в IE6, но и во многих современных браузерах. В идеальном мире, одни элемент, содержащий другой плавающий элемент, полностью изолирует его от окружающих элементов. А в реальном мире веб-браузеров, флоаты, зачастую не изолированы. Когда такое случается, мы обычно говорим, что плавающий элемент не был «очищен» его родительским элементам. Хорошая новость в том, что существуют различные, простые способы чистить флоаты в IE6 и других браузерах.

Один из старейших способов очистить поток от флоата – использовать clearfix хак. Эта CSS-техника, работает посредством генерации контента после родительского элемента, используя CSS-псевдо-класс :after . Сгенерированный контент, впоследствии чистит плавающий элемент. Далее типовой пример:

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

Другой CSS-метод очистки потока – просто назначить float элементу-контейнеру. Например, если вы назначаете float картинке, находящейся в контейнере div который не изолирует ее, просто используйте следующий CSS:

Затем, если содержащий элемент, должен вести себя как обычный, блочный элемент, примените к нему ширину в 100%, чтобы убрать пространство для следующего элемента.

Все бы хорошо, но есть способ очистки потока и получше этого. Просто примените свойство overflow , к контейнеру div , и он автоматически будет расширяться по вертикали и очищать float у дочерних элементов. Вот пример:

Назначение ширины для блока обязательно для Internet Explorer и Opera, но это не значит, что ширина должна быть равна 100%, вы можете использовать любую ширину и единицы измерения, которые посчитаете нужными. Если не хотите указывать ширину ( width ), вместо этого вы можете указать высоту ( height ). Для свойства overflow , также, могут быть использованных любые из перечисленных значений:

  • auto – отображает полосы прокрутки, если контент превышает указанную ширину
  • hidden – никогда не отображает полосы прокрутки, даже если контент не умещается в указанные размеры
  • scroll – всегда отображает полосы прокрутки, даже если в них нет необходимости.

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

Устранение других проблем IE6

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

Относительное позиционирование

Использование position: relative в своей работе, возможно, самый простой способ внести путаницу в IE6. Современные браузеры, без проблем отображают вложенные элементы, позиционированные относительно, но в IE6, зачастую появляются проблемы с чуть более сложной раскладкой. К счастью, есть довольно простое решение – установка hasLayout , путем добавления zoom:1; каждому, относительно позиционированному, элементу.

Помните, что вы не должные применять zoom:1; к любым строковым ( inline ) элементам, потому что, в этом случае IE6, будет трактовать их, как блочные элементы. Не забывайте об этом, и в следующих решениях.

Отрицательные поля

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

Помните, о назначении блоку zoom:1 , которое необходимо, потому что это относительное позиционирование.

Устранение проблем с overflow

Использование overflow в IE6 иногда может привести к неожиданным, необъяснимым проблемам с отображением. К счастью, мы можем разрешить множество overflow -зависимых проблем, путем установки hasLayout с помощью – как вы уже, наверное, догадались – zoom:1 . Далее пример:

Другая, странная проблема с overflow , связана с установкой свойства f ont-style: italic , которое растягивает ширину родительского элемента. Эта проблема решается, путем применения следующего CSS к родительскому элементу:

Выстраивание плавающих элементов

Когда вы применяете float к элементам с фиксированной шириной, они располагаются горизонтально, заполняя всю ширину родительского элемента. По крайней мере так ведут себя блоки, в большинстве браузеров. В IE6, плавающие блоки не будут выстраиваться в одну линию, вместо этого, они скорее выстроятся лесенкой. Хорошая новость в том, что есть целых два решения этой проблемы. Первое – это применить свойство line-height: 0 , к родительскому элементу:

Другой способ – по очереди указать каждому плавающему элементу, свойство d isplay: inline .

Устранения проблем со списками

Наконец, если IE6 решит добавить дополнительные строки ( li ) после окончания вашего списка ( ul ), добавления HTML-комментария, волшебным образом решит эту проблему. Вот как будет выглядеть ваш код до и после применения этого комментария:

До:

После:

Напоследок

Конечно все без исключения верстальщики, и многие обычные пользователи не любят Internet Explorer версии 6, но взгляните на результаты голосования за две недели:

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

Цукерберг рекомендует:  5 причин выбрать направление мобильной разработки


Перевод статьи «Definitive Guide to Taming the IE6 Beast«, автор Jeff Starr

Рассказать друзьям

Понравилась статья? Лучший способ сказать спасибо — поделиться ссылкой в социальных сетях:

PNG background image not showing in IE 8 Asked 7 years, 2 months ago

I have the following html code:

With the following type of css:

But in IE8 i still can’t see a background image, like i see in IE9 or firefox:

Here’s a picture of IE8:

And here is a picture of firefox, how it should be:

I tried the follwing solutions:

To prevent the problem i added the following html5shiv code to the head of the page:

And in firebug i checked to make sure that the section element has the display:block; property set.

Edit: Adding the height css property to the section fixes the background problem. But the section height is variable. So how do i fix that?

5 Answers 5

Your png background image needs to be at least 4x4px.

remove transparent from background

This might be related to your issue. Generally IE9 and below doesn’t like transparency, opacity.

IE7 and IE8 have native PNG support for alpha-transparencies, but it falls to pieces as soon as opacity comes into the picture. When setting any value for opacity, even 100% (ie. filter: alpha(opacity = 100)), IE fills in the alpha-transparency of the PNG with a pure black fill. This is sometimes refered to as a ‘black halo’. The alpha filter can be removed at any time to remove the fill and restore the alpha transparency, but supporting both requires using more of IE’s propriatary filters. All of the follow examples should be placed in a IE-targete

you need to set section to display:block in your CSS

With IE, even with the shiv, you need to declare the HTML 5 elements as block elements. I use this line for Internet Explorer, but you can modify it for the elements you need.

From the Modernizr Documentation: «you’ll also probably want to set many of these elements to display:block;»

PNG в IE6

Если Вы уже немного занимались созданием сайтов, то могли заметить, что PNG-изображения в браузере IE6 и ниже отображаются не корректно. Пример такого «кривого» отображения в PNG в IE6 можно наблюдать на изображении к статье (левое изображение). Удивительно, но многие Web-мастера просто забивают на это, оправдываясь тем, что IE6 использует не более 4% пользователей. Я считаю это непростительной глупостью, ведь решение этой проблемы настолько простое, и о нём я расскажу в этой статье. А результат этого решения Вы можете наблюдать вновь на изображении к статье (изображение справа).

Чтобы решить проблему отображения PNG в IE6 и более ранних версиях этого браузера, надо воспользоваться простым скриптом на JavaScript, который Вы можете скачать отсюда: скачать hack для png.

Далее Вы сохраняете этот скрипт к себе на сайт, например, в папку js. И, наконец, на всех страницах сайта, где у Вас имеются изображения в PNG-формате, Вы вставляете следующие строки в голове документа (внутри тега head):

Таким образом, все браузеры IE, младше 7-ой версии будут подключать этот скрипт, который исправит проблему отображения всех PNG-изображения на странице в IE6 и ниже.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 5 ):

    А как узнать браузер пользователя и при этом, если браузер пользователя имеет старую версию, то выводилось окошко? Например: «У вас браузер: IE6. Мы настоятельно рекомендуем обновить Ваш браузер к последней версии (IE9)», ну как-то так.

    Вот так: http://myrusakov.ru/brauzer-javascript.html

    Вы хоть скрипт то проверяли, когда заливали сюда? Не пашет он! Смотрел через IETester.

    Скрипт работал, я проверял. Более того, данный подход раньше был наиболее простым. А сейчас либо что-то случилось, либо (что скорее всего) IETester свойство Filter всё-таки не поддерживает. К сожалению, у меня нет IE6, поэтому точно сказать могу, вполне вероятно, там это будет работать.

    Verstaka.net

    Блог фронтендера


    Опубликовано 25 июня 2012

    Коллекция багов и решений для IE

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

    Для тестирования проектов в IE7-9 можно использовать 10-ую версию в режиме эмуляции — так удастся выловить большинство ошибок. Однако если нужно тестировать в IE6, придется использовать виртуальную машину с Windows XP, в которой установлен данный браузер. Из бесплатных вариантов могу порекомендовать виртуалку VirtualBox . В качестве альтернативы, но несомненно менее лучший вариант, можно рассмотреть IE Tester .

    Содержание статьи

    Тестирование верстки

    Сами понимаете, что браузер от Microsoft отдельный случай — в нем приходится тестировать проекты, начиная с 7-ой версии по 10-ую, и иногда, как я рад вписать это слово, с 6-ой. Для этого удобно использовать последнюю версию браузера в режиме эмуляции, выбрав необходимую версию. Зайдем в средства разработчика (прим. — F12) и выберем режим браузера:

    Режимы браузера IE

    Этого хватит для исправления 95% процентов багов, например в режиме эмуляции вы не увидите ошибок в JS-коде, свойственных оригинальным браузерам. Для остальных 5% случаев или в случае тестирования в 6-ой версии придется воспользоваться другими вариантами:

    • использование виртуальной машины с Windows XP и установленным оригинальным Internet Explorer 6
    • использование IETester . Программа позволяет одновременно проверять свой проект в IE6-10. Однако иногда в ее работе возможны ошибки — результат в окне может выглядеть криво, а на деле все нормально. Подойдет как альтернативный вариант
    • portable-версии браузеров, отличная подборка здесь , однако недостаток тот же, что и в IETester’е — бывает неверным отображение верстки, хотя в оригинале все может работать корректно
    • существуют онлайн-сервисы, которые позволяют проверить проект в целой кучи браузеров посредством снятия скриншота. Один из таких сервисов browsershots.org

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

    IE , , и другие, и показывает их так, будто им назначен display: inline . Решить проблему обычным присвоением display: block для новых элементов не получится, хотя это необходимо для других браузеров, не поддерживающих новые теги (кстати входит в reset.css и normalize.css). Чтобы исправить это небольшое недоразумение, через Сonditional comments перед новыми тегами подключим небольшой скрипт html5shiv Реми Шарпа.

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

    Существуют и альтернативные варианты подключения html5shiv — например через библиотеку Modernizr.

    Поддержка свойств CSS3 border-radius, box-shadow и linear-gradient

    Как известно Internet Explorer ниже 9-ой версии не поддерживает новые CSS3 свойства, которые хочется использовать уже здесь и сейчас. Конечно самый лучший принцип — придерживаться правила graceful degradation для старых браузеров, т.е. оставлять доступным содержание сайта при его менее приглядном виде. Но все-таки некоторые свойства можно имитировать. Для этого нам пригодится скрипт PIE (Progressive Internet Explorer), с помощью которого мы можем имитировать border-radius , box-shadow и linear-gradient через VML-объект.

    Из архива с плагином необходимо вытащить файл PIE.htc , залить его в проект и в стилях для Internet Explorer свойством behavior указать путь к этому файлу.

    Однако не все так здорово, как кажется — у PIE есть два серьезных недостатка: первый — при множестве PIE-подключений на странице он значительно тормозит браузер, второй — при масштабировании окна браузера могут наблюдаться артефакты изображений. Поэтому каждый должен решить для себя — использовать его или нет, и соответственно дальше делать скругления, градиенты и тени для IE картинками, или следовать парадигме graceful degradation.

    Поддержка media queries

    Internet Explorer ниже 9-ой версии не поддерживает media queries, чтобы исправить это, подключим скрипт от Google:

    Canvas для IE — explorercanvas

    Вместе с приходом HTML5 пришла возможность рисовать прямо в браузере, делается это с помощью нового элемента . Разумеется старые браузеры IE не поддерживают этот элемент, но можно воспользоваться расширением explorercanvas от Google, который позволяет эмулировать некоторые основные возможности холста через VML. Подключение скрипта через Conditional comments:

    Фон на всю ширину окна браузера

    В CSS3 появилось чудесное свойство background-size для того чтобы можно было растянуть фон на всю ширину окна:

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

    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

    Цукерберг рекомендует:  Обработчик шаблонов Twig. Быстрый старт.

    Еще один пример применения способов, которые сокращают временные затраты заключается в возможности создания собственных градиентов и фонов посредством 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 считается сокращение функциональной части проекта. Мы надеемся, что вышеприведенные решения предоставят вам хоть какие-то возможности в создании кросс-браузерных приложений для требовательных клиентов.

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

    Веб-заметки и Веб-подсказки

    Как вставить html-код только для Internet Explorer?

    Разработчики Internet Explorer (далее IE) добавили такую индивидуальную возможность.
    Во-избежание различий в дизайне, css-стилях, javascript-коде в различных веб-браузерах иногда приходится применять индивидуальные решения. Для IE это приходится делать чаще всего. Что самое интересное, что для различных версий этого браузера часто фиксы бывают тоже разные.
    К примеру: прозрачность картинок в формате PNG не работает в IE6, но в последующих версиях уже работает.
    А иногда приходится отключать какую-то «тяжелую впечатляющую возможность» для «слабых» браузеров, чтобы не перегружать их, или чтобы не оптимизировать этих возможностей, на что может уйти много сил и времени.

    Как же это делается?
    В HTML-коде есть такое понятие как комментарии. Это то, что все веб-браузеры игнорирует и не отображает. Они просто на них не смотрят при подготовке исходного кода страницы.
    Реализуются комментарии так:

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

    Этот код виден только для IE

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

    • IE — любая версия Internet Explorer;
    • IE 5 — Internet Explorer 5;
    • IE 5.5 — Internet Explorer 5.5;
    • IE 6 — Internet Explorer 6;
    • IE 7 — Internet Explorer 7;
    • IE 8 — Internet Explorer 8;
    • IE 9 — Internet Explorer 9;
    • lt — версия меньше указанной;
    • gt — версия больше указанной;
    • lte — версия меньше или равна указанной;
    • gte — версия больше или равна указанной.

    Пример 1: Подключение стилей с файла «style_ie.css» только для Internet Explorer

    Пример 2: Подключение внешнего javascript-скрипта только для Internet Explorer весрии 6-й и ниже

    Также есть возможность использовать данных подход с точностью до наоборот, а точнее — отображать html-код во всех веб-браузерах кроме IE.
    Пример 3:

    Для всех веб-браузеров кроме IE

    Обобщающий пример:

    Для всех браузеров

    Все кроме IE

    Для всех версий IE

    Для IE6

    Для IE7

    Для IE8

    Для IE9

    Для IE версий
    Для IE версий
    Для IE версий > 7й

    Для IE версий >= 7й

    Html — HTML png и IE

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

    Плагин для создания круговых обзорных изображений с управлением курсором

    ThreeSixty — плагин jQuery для создания из серии изображений кругового обзорного представления, которое управляется с помощью мыши или курсора.

    Набор стилей для чекбоксов

    9 наборов правил для оформления чекбоксов на страницах и формах веб проекта.

    Выскальзывающие счетчики категорий

    Набор правил CSS для формирования выскальзывающих ярлыков с количеством записей в категории или метке.

    Круглый элемент управления на CSS

    Набор правил и разметка для организации оригинального элемента управления для веб проекта.

    CSS код индикатора загрузки

    Интересный индикатор загрузки, сделанный без использования изображений и JavaScript.

    Кнопочное меню на чистом CSS

    Оригинальное кнопочное меню выполненное без использования изображений.

    Выпадающее меню с 3D эффектом

    Код выпадающего меню с интересным 3D эффектом при раскрытии пункта.

    Wiki-учебник по веб-технологиям: CSS/КроссбраузерностьCSSХаки .

    Когда CSS используется не только для оформления текста, но и для работы со слоями при бестабличной верстке, необходимо помнить, чт осовременные браузеры не одинаково трактуют такие важные параметры как margin — внешний отсутп элемента, padding — внутренний отступ элемента, а также параметры position — положение, float — обтекание текстом и ряд других.

    Из-за этих различий в трактовке значений параметров, часто случается, что сайты и веб-интерфейсы, которые нормально смотрятся в браузерах Mozilla Firefox, Opera и Safari, вдруг начинают разъезжаться в браузере Internet Explorer.

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

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

    Оглавление документа

    CSS для IE 5, 5.5, 6, 7

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

    Браузеры IE давно поддерживают так называемые условные комментарии (Conditional Comments), которые позволяют делать контент видимым только для IE. Условные комментарии – это просто специальным образом сформированные HTML комментарии, которые понимают только определенные версии Internet Explorer’a для Windows. Для примера вы можете использовать условные комментарии для исправления бага прозрачности PNG в IE.

    Для их использования нужно :

    1. Сначала создать общую таблицу стилей для всех браузеров, без каких-либо хаков, чтобы потом продолжить работу по исправлению ошибок при отображении страницы в IE.
    2. Потом таблица стилей с исправленными ошибками сохраняется отельно и становится таблицей стилей для всех версий IE (например, all-ie.css).
    3. Сохраните отдельно таблицы стилей с исправлениями ошибок отдельно для каждой версии IE (например, ie-5.0.css).
    4. Далее необходимо последовательно подключить эти таблицы стилей через HTML-код с помощью условных комментариев.


    Синтаксис условных комментариев

    Приведенный условный комментарий будет понят браузерами IE5, IE5.5 и IE6, а также IE7 и IE8:

    Применение CSS для IE5

    Если вам необходимо применить условный комментарий только для IE5, то необходимо просто указать версию 5.0 в условии if IE 5.0:

    Применение CSS для IE5.5

    Если необходимо применить относительно IE5.5, то это будет выглядеть так:

    Применение CSS для IE6

    То же самое для IE6:

    Применение CSS для IE5 и IE5.5 одновременно или для нескольких версий

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

    Первый пример подключит таблицу стилей к любой версии Internet Explorer’а первая цифра которой 5:

    В качестве альтернативы, можно указать, чтобы таблицы стилей подключались к любой версии браузера, номер которой меньше 6-ти:

    Вместо lt (less then — меньше) можно также использовать lte (less then or equal to — меньше или равен), gt (greater then — больше), gte (greater then or equal to — больше или равен) главное при всем этом многообразии возможностей правильно выбрать порядок указания условных комментариев, чтобы не попасть в ситуацию, когда для некоторых браузеров группы условных комментариев пересекаются, давая неожиданный результат.

    Порядок использования

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

    Другие достоинства этого метода

    Валидность

    Отладка условных комментариев

    Существует одно предупреждение, о котором стоит упомянуть.

    Если вы используете несколько версий Internet Explorer’а на одной машине, то все эти версии будут выдавать себя за самую новую из установленных версий. Это означает, что если вас установлен IE6, но вы просматриваете страницу с помощью IE5, выполниться этот условный комментарий:

    А этот условный комментарий не выполниться:

    Для наиболее точного отслеживания различий в обработке CSS разными версиями IE хорошо себя зарекомендовала бесплатная программа IETester, которая поддерживает все версии IE от 5 до 8. А для быстрого изменения праметров CSS в IE8 по нажатию F12 доступно средство разработчика, напоминающее FireBug в Mozilla Firefox.

    Аналогично объявлению таблиц стилей, этим способом можно скрывать HTML код от определенной или всех версий IE. Например, надпись «HTML-код» будет отображаться во всех браузерах кроме IE6, если поместить её в условный комментарий следующим образом:

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

    Аналогично условным комментариям в IE 5—IE 8 поддерживается тег . . Этот тег позволяет скрыть информацию от пользователей IE, таким образом код:

    пользователям IE будет показан как: Это браузер Internet Explorer, а пользователям других браузеров — Это не браузер Internet Explorer.

    CSS хаки IE

    Чтобы не загромождать HTML-код объявлением нескольких таблиц стилей или, если требуется сохранить единственный CSS-файл можно написать отдельные стили, которые будут работать только в IE. Причем, есть вариант как для IE6, так и для IE7.

    Для IE всех версий. Если поставить перед свойством две наклонные черты ( // ), оно будет восприниматься лишь браузерами IE всех версий. Другие браузеры такое свойство проигнорируют.

    Для IE6 существует возможность поставить минус (-) или нижнее подчеркивание (_) перед свойством, при этом IE7 не отреагирует на него. Можно также использовать конструкцию:

    В этом случае фон будет красным в браузерах Opera и Firefox, зеленым в IE7 и синим — в Internet Explorer 6.

    В примере меняется цвет фона для разных браузеров. На практике же этот метод используется для того, чтобы добиться идентичности отображения и кроссбраузерности. Чаще всего приходится прибегать к нему при позиционировании и задавать разные значения свойств типа left, top, padding, margin, width и других, связанных с размерами, процентами и пикселами.

    Для IE7 используется CSS хак:

    CSS для Firefox

    Также существуют специальные CSS хаки, позволяющие показывать стили только браузеру Firefox.

    Для быстрого изменения праметров CSS в Firefox по нажатию F12 доступно (требует предварительной установки) средство разработчика Firebug — является лучшим среди аналогов.

    CSS для Opera

    CSS хаки для браузера Opera представлены следующими примерами:

    или (но эту конструкцию видят и современные Mozilla Firefox)

    Чтобы было видно только браузеру Opera версии от 10 и выше (на более ранних не тестиорвалось) надо писать так:

    можно загрузить целый css, как это делали для IE:

    и, наконец, можно воспользоваться /Java Script, в котором загрузить нужные таблицы стилей:

    Для быстрого изменения праметров CSS в браузере Opera также доступно средство разработчика. Для его открытия надо перейти в меню «Инструменты» — > «Дополнительно» — > «Средства разработки».

    Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих