CSS IE body background gradient

问题:

I am using a CSS linear gradient background on a website. The background is working fine in all the browsers I have tested - except in IE. Somehow IT doesnt seem to extend the background below the footer of wordpress. All other browsers scale the background on the entire page.

I use the following code - which includes specific code for most browers:

body{
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #d0d3e6 100%, #d0d3e6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#d0d3e6), color-stop(100%,#d0d3e6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#d0d3e6 100%,#d0d3e6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#d0d3e6 100%,#d0d3e6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#d0d3e6 100%,#d0d3e6 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 0%,#d0d3e6 100%,#d0d3e6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d0d3e6',GradientType=0 );!important /* IE6-9 */
font: normal 12px/100% "Arial", Arial;
}

Any idea why IE cuts off the background?

Thanks a lot!

回答1:

Try:

html, body {
    height: 100%;
    min-height: 100%;
}

回答2:

I think you can fix this adding this line before the body styles declaration:

html {height:100%;}

See it in a fiddle

Note: You need to set the !important just before the semicolon, as this:

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d0d3e6',GradientType=0 )!important /* IE6-9 */;

回答3:

You need to use an image to have a gradient in the background:

body{
background: url(yourimage.jpg) repeat-x left top #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #d0d3e6 100%, #d0d3e6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#d0d3e6), color-stop(100%,#d0d3e6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#d0d3e6 100%,#d0d3e6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#d0d3e6 100%,#d0d3e6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#d0d3e6 100%,#d0d3e6 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 0%,#d0d3e6 100%,#d0d3e6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d0d3e6',GradientType=0 );!important /* IE6-9 */
font: normal 12px/100% "Arial", Arial;
}

For older versions of browsers they still need images to give the same effect.

To get the gradient to the bottom of the page try this:

var bodyheight =$(window).height();
$('body').css({'min-height':bodyheight +'px'});

The above jquery will force the body to have a minimum height of the users window size.

回答4:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */