IE 8: Fondo de tamaño fijo

138

He intentado añadir un tamaño de fondo para IE, pero no está funcionando en absoluto:IE 8: Fondo de tamaño fijo

HTML

<h2 id="news">Notícias <img src="white-marker.png" alt="" /></h2>

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; 
}

¿Qué le pasa con el filter?

Fuente

2011-02-03 Thomas

Asegúrese de que es compatible referirse http://stackoverflow.com/questions/2991623/make-background-size-work-in-ie – sathish

Su la sugerencia funciona si no estás usando border-radius ... – Thomas

Como señala @RSK, 'background-size' no funciona en IE8. –

147

Como Publicado por 'Dan' en un mismo hilo, hay una solución posible, si usted no está usando un sprite:

How do I make background-size work in IE?

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

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

Sin embargo, esta escala la imagen completa para caber en el área asignada. Así que si está usando un sprite, esto puede causar problemas.

Precaución
El filtro tiene un defecto, los enlaces dentro del área asignada ya no se puede hacer clic.

Fuente

2012-02-07 00:26:03 Sotkra

+21

El filtro tiene un defecto importante, ya que congela cualquier enlace dentro del área asignada. – user890332

+13

También tenga en cuenta que la ruta de la imagen debe ser relativa al documento en lugar de al archivo CSS. – Ash

es menos que perfecto, pero se hace el trabajo – Sotkra

Según lo señalado por @RSK, IE8 no admite el tamaño de fondo. que encontrar una manera de lidiar con esto, he utilizado algunos hacks específicos es decir, como mostró aquí:

//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; 
}

El uso de este pude cambiar mi imagen del logotipo a una imagen residido feo. Pero el resultado final está bien. Te sugiero que pruebes algo como esto.

Fuente

2012-03-23 14:10:19 Custodio

Creé jquery.backgroundSize.js: un plugin de jquery de 1.5K que se puede utilizar como una alternativa de IE8 para los valores de "portada" y "contener". Eche un vistazo al demo.

la solución de su problema podría ser tan simple como:

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

Fuente

2012-04-13 19:25:17

¡Esto es genial! – VishwaKumar

¡Funcionó perfecto! Muchas gracias. Me salvaste el tiempo. –

¡Esto funciona increíblemente bien! ¡Gracias amigo por salvarme el día! – pascalvgemert

utilizo la solución de filtro anterior, para IE8. Sin embargo .. Con el fin de resolver el problema de congelación enlaces, haz también lo siguiente:

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

Esto ha resuelto el problema enlaces congelada para mí.

Fuente

2012-04-24 19:29:48 user890332

También he encontrado otro enlace útil. Es un truco de fondo utilizado como esto

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

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

Fuente

2013-05-06 03:56:43

Esto ya fue mencionado por el autor (Louis Rémi) en una respuesta anterior. – ndorfin

Pero no en esta pregunta, ¿verdad? –

¡Funciona perfecto de fábrica! –

Respuesta

Cuestiones relacionadas