IE 8: исправление фонового размера

Я попытался добавить размер фона в IE, но он не работает вообще:

HTML

Notícias

CSS:

 div#content h2#news { background: url('../images/news-background.jpg') no-repeat; background-size: 100%; border-radius: 20px; color: #fff; margin: 20px 0 0 20px; padding: 8px 20px; width: 90%; -moz-background-size: 100%; -moz-border-radius: 20px; -webkit-background-size: 100%; -webkit-border-radius: 20px; } 

Что случилось с фильтром ?

Как писал «Дэн» в аналогичной теме, существует возможное исправление, если вы не используете спрайт:

Как создать фоновый размер в IE?

 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='images/logo.gif', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='images/logo.gif', sizingMethod='scale')"; 

Однако это масштабирует изображение целиком в выделенной области. Поэтому, если вы используете спрайт, это может вызвать проблемы.

предосторожность
У фильтра есть недостаток, любые ссылки внутри выделенной области больше не доступны для кликов.

Я создал jquery.backgroundSize.js : плагин jQuery 1.5K, который можно использовать в качестве резервной копии IE8 для значений «обложка» и «содержать». Взгляните на демо .

Решение вашей проблемы может быть простым:

 $("h2#news").css({backgroundSize: "cover"}); 

Также я нашел еще одну полезную ссылку. Это фоновый взлом, используемый таким образом

 .selector { background-size: cover; -ms-behavior: url(/backgroundsize.min.htc); } 

https://github.com/louisremi/background-size-polyfill

Я использую решение фильтра выше, для ie8. Однако .. Чтобы решить проблему замораживания ссылок, сделайте также следующее:

 background: no-repeat center center fixed\0/; /* IE8 HACK */ 

Это решило проблему замороженных ссылок для меня.

Как указано @RSK IE8 не поддерживает фоновый размер. Чтобы понять способ справиться с этим, я использовал некоторые IE-хаки, как показано здесь:

 //IE8.0 Hack! @media \0screen { .brand { background-image: url("./images/logo1.png"); margin-top: 8px; } .navbar .brand { margin-left: -2px; padding-bottom: 2px; } } //IE7.0 Hack! *+html .brand { background-image: url("./images/logo1.png"); margin-top: 8px; } *+html .navbar .brand { margin-left: -2px; padding-bottom: 2px; } 

Используя это, я смог изменить свой логотип на уродливую фотографию. Но конечный результат в порядке. Я предлагаю вам попробовать что-то вроде этого.

  • jQuery - Получить ширину элемента, если он не отображается (Дисплей: Нет)
  • Как получить ширину строки в Libgdx?
  • Как получить ширину и высоту файла android.widget.ImageView?
  • Как получить размер NSString
  • Почему ActualWidth и ActualHeight 0.0 в этом случае?
  • Ширина UIWebView iPhone не подходит после операции масштабирования + изменение UIInterfaceOrientation
  • Давайте будем гением компьютера.