Работа в 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,
echo base64_encode(file_get_contents("../images/flag.png"))
?>) top left no-repeat;
height: 14px;
text-indent: 10px;
}
Когда сервер начнет анализировать CSS-файл, он автоматически перекодирует бинарный файл изображения в base64 и отправит эти данные внутри CSS-файла. Следующим шагом будет добавление распознавания браузеров для отправки изображения только IE и встроенных изображений всем остальным. Это можно сделать либо внутри CSS-файла с PHP-кодом, либо с помощью условных комментариев, например:
В файле ie.css должно быть нормальное обращение к картинке, например:
ul li {
margin: 0 0 1px;
background: url(/images/flag.png) 0 0 no-repeat;
}
...