Блог

Я использую размер фона в Chrome и обнаружил, что это CSS3, который не поддерживается в старых версиях IE. Поэтому я просмотрел несколько сообщений, и кто-то рекомендовал использовать этот фильтр:

 progid:DXImageTransform.Microsoft.AlphaImageLoader
  

HTML:

 <span class="num_blue_small small"><span class="numberText">4</span></span>
  

CSS:

 .num_blue_small
{
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='/images/num_blue_small.png',
    sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/num_blue_small.png', sizingMethod='scale')";
 }

.small
{
    display: inline-block;
    height: 35px;
    width: 35px;
    text-align: center;
    vertical-align: middle;
    line-height: 35px;

}

.numberText
{
    color: White;
}
  

Благодаря реализации «фильтра» он отлично работает в IE7; однако он становится невидимым в Google Chrome.

Если я включу background: url(/images/num_blue_ssc.png) no-repeat; в .num_blue_small класс CSS, он будет нормально работать в Chrome, но IE 7 покажет 2 одинаковых изображения разных размеров.

Что я должен сделать, чтобы это исправить?

вы могли бы попробовать полизаполнение фонового размера

Поведение IE, добавляющее поддержку размера фона в IE8. Луи Реми

Прогрессивное улучшение — это мантра, по которой я живу. Это означает «Получайте удовольствие от CSS3 и не беспокойтесь о пользователях IE8; в любом случае, они никогда не заметят, что им не хватает ваших великолепных текстовых теней и градиентов».

Все было хорошо, пока я не обнаружил элегантность background-size: cover; и background-size: contain; . Например, первый вариант позволяет изображению полностью закрывать фон, не отправляя фоновое изображение 1920х1080 по каналам.

К сожалению, они не ухудшаются изящно: веб-сайты, скорее всего, будут казаться пользователям IE8 сломанными

Они предлагают эту функцию:

• правильное положение и размер фонового изображения
• обновлено положение и размер при изменении размера браузера
• обновляется изображение, положение и размер при изменении фонового изображения

но, похоже, у них есть некоторые ограничения:

• несколько фонов (хотя трюк:after все еще можно использовать)
• 4 значения синтаксиса background-position
• любое повторяющееся значение в background-repeat
• значения фона, отличные от значений по умолчанию — [клип / источник / вложение / прокрутка]
• изменение размера фона при изменении размеров элемента