Работа в 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;
}