Одним из возможных выходов из сложившейся ситуации будет использование характерных для IE CSS-хаков, чтобы только для него подключить фоновые изображения. В итоге вышеприведенный пример будет выглядеть примерно так:
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; } * html ul li { background-image: url(/images/flag.png); } *+html ul li { background-image: url(/images/flag.png); }
Также возможно кодирование изображений, которые выводятся в base64, автоматически при изменении этих изображений (для этого потребуется простой скрипт, который проверяет, обновились ли соответствующие файлы; если обновились, то перезаписывает их представление в CSS-файле, заодно и меняет хэш-строку для подключения этого файла в HTML, чтобы избежать кэширования).
Для включения небольших графиков прямо в HTML-код прекрасно подойдут условные комментарии, когда для ряда браузеров изображение выводится в base64, а для остальных (например, для IE) подключается через условные комментарии. Например, так:
<!--[if !IE]>--> <img src="data:image/png;base64,..." alt="График" title="График"/> <!--<![endif]--> <!--[if IE]> <img src="chart.png" alt="График" title="График"/> <![endif]-->
Если использовать связку «относительное позиционирование родителя — абсолютное позиционирование дочернего элемента», то IE будет просто выводить картинку из внешнего файла поверх непонятного (для него) объекта.