Работа в Internet Explorer

Работа в Internet Explorer

Существует три способа обойти отсутствие в IE поддержки data:URI. Используя распознавание браузеров (например, с помощью условных комментариев, ведь речь идет только про IE), можно просто отображать внешнее изображение для IE и встроенные изображения для остальных браузеров. Или вы можете применить JavaScript для эмуляции этой поддержки в IE, но эта техника потребует довольно значительного объема JavaScript-кода. О третьем способе пойдет речь в разделе, описывающем mhtml-технику.

Вышеприведенный PHP-код позволяет легко вставить base64-аналог изображения (можно расширить этот пример, чтобы, например, распознавать заголовки, отправляемые браузером серверу, и только для IE выводить URL для изображения, для остальных же кодировать его в base64):

ul {

list-style: none;

}

ul li {

margin: 0 0 1px;

background: url(data:image/gif;base64,<?php

echo base64_encode(file_get_contents("../images/flag.png"))

?>) top left no-repeat;

height: 14px;

text-indent: 10px;

}

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

<!--[if gte IE 5]>

<style type="text/css" src="ie.css">

<![endif]-->

<!--[if !(IE)]>

<style type="text/css" src="main.css">

<![endif]-->

В файле ie.css должно быть нормальное обращение к картинке, например:

ul li {

margin: 0 0 1px;

background: url(/images/flag.png) 0 0 no-repeat;

}

...