Question

我在网站上使用CSS线性渐变背景。在我测试的所有浏览器中，后台工作正常 - 除了在IE中。不知何故，IT似乎没有将背景扩展到wordpress的页脚下面。所有其他浏览器都会缩放整个页面的背景。

我使用以下代码 - 其中包含大多数浏览器的特定代码：

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

知道为什么IE会切断背景吗？

非常感谢！

Answer 1

我认为你可以在身体样式声明之前解决这个问题：

html {height:100%;}

在fiddle

中查看

注意：您需要在分号前面设置!important，如下所示：

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

Answer 2

尝试：

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

Answer 3

您需要使用图像在背景中具有渐变：

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

对于旧版本的浏览器，他们仍然需要图像才能产生相同的效果。

要获得页面底部的渐变，请尝试以下操作：

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

上面的jquery将强制主体具有用户窗口大小的最小高度。

Answer 4

filter：progid：DXImageTransform.Microsoft.gradient（startColorstr =＆＃39; #cccccc＆＃39;，endColorstr =＆＃39;＃000000＆＃39;）; / *表示IE * /

CSS IE体背景渐变

4 个答案: