1

我在网站上使用 CSS 线性渐变背景。在我测试过的所有浏览器中，背景都运行良好——除了 IE。不知何故，它似​​乎没有将背景扩展到 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 会切断背景吗？

非常感谢！

4

4 回答 4

2

我认为您可以在正文样式声明之前添加此行来解决此问题：

html {height:100%;}

在小提琴中看到它

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

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

于 2013-04-15T10:31:00.250 回答
1

尝试：

html, body {
    height: 100%;
    min-height: 100%;
}
于 2013-04-15T10:40:09.710 回答
0

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

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 将强制 body 具有用户窗口大小的最小高度。

于 2013-04-15T10:16:17.193 回答
0

过滤器：progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* 对于 IE */

于 2014-04-22T07:56:56.460 回答