MSHTML откат для данных URI:s

Мой сайт использует данные URI: для уменьшения количества HTTP-запросов к моему сайту. Проблема в том, что данные не работают в IE7, браузере, который мы должны поддерживать (нет, нам не нужен IE6). Я следовал руководству Стояна и фактически заставил его работать, но после недавнего обновления безопасности Microsoft (KB2544893, как описано в комментарии к исходной статье) откат, похоже, перестал работать.

В приведенном выше комментарии предлагается, чтобы я попытался отправить файл MSHTML с сообщением Content-Type message/rfc822, но я также не могу заставить его работать, и я пробовал несколько разных способов в течение нескольких часов.

Поэтому мой вопрос таков: вы можете заставить метод, описанный Стояном, работать как-нибудь? Я был бы очень признателен за рабочий пример, чтобы убедить меня, что это действительно возможно.

3 ответа

Решение

Я связался со Стояном Стефановым (первоначальным автором методики), и он исправил свой оригинальный пример, так что теперь он работает. Простое добавление "message/rfc822" в качестве типа контента - это все, что нужно.

Исправленный пример: http://www.phpied.com/files/datasprites/testhover2.html

Я попросил его оставить комментарий здесь, чтобы я мог присудить очки, но он не хотел.

Лично я бы использовал условные стили. В вашей основной разметке - запустите ее следующим образом:

<!DOCTYPE html>
<!--[if IE 7]>    <html lang="en-us" class="ie7"> <![endif]-->
<!--[if IE 8]>    <html lang="en-us" class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en-us"> <!--<![endif]-->

В вашем CSS теперь вы можете сделать:

.myClass {
      background-image: url(/*DATAURI GOES HERE*/);
}

а также

.ie7 .myClass {
      background-image: url(fallback-image.png);
}

ОБНОВИТЬ

В дополнение к комментариям ниже, если вы беспокоитесь о производительности IE7, надежным подходом было бы сделать ваше резервное изображение IE7 спрайтом.

Таким образом, вы делаете только 1 дополнительный HTTP-вызов для пользователей IE7:

.ie7 .myClass {
      background-image: url(fallback-sprite.png);
      background-position: 150px 15px;
}

http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/ вот ваше решение, я думаю

Другие вопросы по тегам