2012-07-24 5 views
5

Estoy utilizando el filtro de IE para hacer que el fondo tenga un degradado, pero solo en IE8 tiene un problema. Estas líneas hacen que el gradiente de fondo correctamente pero la página ya no desplazamiento:IE8 El degradado de filtro en el cuerpo desactiva la página de desplazamiento

background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkYjllOCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxZTU3OTkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+) no-repeat fixed; 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#007db9e8', endColorstr='#1e5799',GradientType=0) no-repeat fixed; /* IE6-8 */ 

También han intentado fijar la altura a 100%. ¿Qué pasa?

http://asthmaready.org/training-programs/

+0

Tal es la vida cuando se usa la horrible propiedad 'filter' de IE. No he oído hablar de este error antes, pero hay muchos otros para tener en cuenta. Ah, y ¿por qué estás usando una imagen base64 para el degradado en otros navegadores? ¿Por qué no usar CSS 'linear-gradient'? – Spudley

+0

También estoy usando gradiente lineal, pero no es compatible con IE8, encontré exactamente mi problema: http://stackoverflow.com/q/8636924/744228 – Ray

Respuesta

1

trate de agarrar filtro de gradiente a div#page

ACTUALIZACIÓN:

body.cbgc { 
    background: -moz-linear-gradient(top, rgba(125,185,232,0) 0%, rgba(30,87,153,1) 100%) no-repeat fixed; 
    .... 
} 

alguna manera bloquea la posterior declaración de estilo #page, por lo que cuando se aplica un filtro a la misma, es ignorado Intente eliminar y aplicar filtro al #page para ver si esto ayuda.

Otro punto es que el degradado en #page no terminará en el borde de la pantalla (como en otros navegadores), sino que pasará al área desplazada. Si esto es relevante para usted, puede agregar div adicional, un hermano con #page, y aplicarle el filtro y la posición corregidos. Así que todo se verá igual que en los navegadores que no sean IE

+0

Lo intenté también. – Ray

+0

extraño, probé esto en IE8 dev-toolbar y todo funcionó bien. Sin embargo, he eliminado la posición: relativa al filtro Añadir, puede ser esta es la causa – user907860

+0

Lo hace ya sea blanco (solo filtro) o azul (filtro + bg) – Ray

0

¡Acabo de tener el mismo problema! Como Calígula respondió, no apliques el filtro al cuerpo, el -moz, -webkit, ... sin embargo, funcionará bien. Aplique el filter:progid al primer div dentro de su cuerpo (si es necesario, agregue un div.container {height:100% width:100%})

Cuestiones relacionadas