Существует три способа обойти отсутствие в 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; }