Css 过滤器:渐变和背景:固定

Css 过滤器:渐变和背景:固定,css,internet-explorer-8,Css,Internet Explorer 8,代码: body{背景附件:已修复!重要;筛选器:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#000000,endColorStr=#3d3c3c)} 渐变在IE8中并不固定,而是滚动到纯白色背景中。渐变在Firefox和Chrome中保持不变,并随页面滚动 在IE8中有没有办法将其修复?我甚至没有意识到这是一个问题(根据谷歌,我找不到任何东西) 编辑:我用上面的代码创建了一个测试页面(还有相当

代码:

body{背景附件:已修复!重要;筛选器:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#000000,endColorStr=#3d3c3c)}

渐变在IE8中并不固定,而是滚动到纯白色背景中。渐变在Firefox和Chrome中保持不变,并随页面滚动

在IE8中有没有办法将其
修复?我甚至没有意识到这是一个问题(根据谷歌,我找不到任何东西)


编辑:我用上面的代码创建了一个测试页面(还有相当多的Lorem Ipsum),背景像应该的那样得到了修复。所以它一定是我的布局中的某个东西。

看起来你所缺少的只是在身体上设置一个高度。在IE 8中添加此样式非常适合我:

html,正文{高度:100%}

因此,使用小提琴的风格,它看起来是这样的:

html, body {height: 100%}
body {
    background-attachment: fixed !important;
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#000000, endColorstr=#ffffff);
}
这就是跨浏览器版本的外观:

html, body {height: 100%}
body {
    background-attachment: fixed !important;
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#000000, endColorstr=#ffffff);
    background-image: -moz-linear-gradient(center top -90deg, #000000, #ffffff);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000000), to(#ffffff));
}
显然,您可以将特定于IE的代码放在其他地方,并有条件地加载它,等等


这在IE8、Firefox3.6、Chrome9和Safari5(Webkit)中测试良好,但在Opera中不起作用。对于Opera、SVG或实际背景图像?

我有IE 8.0.6001.18702,使用您的代码,滚动内容,渐变对我来说是固定的。我从来没有看到过白色的背景。由于使用的过滤器只在IE中工作,我认为您在Firefox和Chrome中使用的方法是不相关的。你能提供一把小提琴来说明你的问题吗?可能不相关,但很烦人,因为Moz和Webkit的风格是我想要的。对于小提琴,但我真的不知道我上面发布的代码和那之间有什么区别。尽管我会说,即使是小提琴也是一个很好的例子,因为渐变从预览的顶部到底部,滚动而不是在“窗口”中显示整个渐变并保持固定。我布局中的所有内容都是绝对的或固定的,即使主体高度为100%,也会导致问题吗?
body
实际上将其高度设置为100%,并在代码中的其他地方使用html。很抱歉没有包括在内,但在过去的几天里我已经编写了很多代码,包括我和其他人的代码正如我上面所说的,它的工作方式似乎与我的主要工作方式不同。我不知道这是为什么,我已经拆开我的CSS试图找出它,但我真的没有运气找到它。有趣的是,我发现IE拒绝在元素上使用
display:none当然,稍后将使用jQuery调用它们。继续。我最终得出的结论是,它根本不起作用,需要自身出问题,因此我将背景颜色设置为底部渐变,并简单地允许主体背景与内容一起滚动。对于
显示:无问题,我使用了透明背景图像。我讨厌诉诸于此(太他妈了!),但如果用另一种方法解决问题,尽管不太可取,但它不会被打破。它只是IE。我的代码确实产生了期望的结果。然而,正如你所说的,问题在你的CSS的其他地方,没有看到它,我不知道还有什么建议。
display:none
问题很糟糕,但它是IE;你还能说什么呢?我想这与正文没有延伸到页面的整个高度有关,老实说,但这和我遇到的另一个问题是相同的布局,所以呃。这个特定项目的用户库无论如何都不是使用IE的类型,因此“变通方法”比分解在他们将使用的浏览器中完美工作的CSS要快得多、方便得多。正如我所说的,我不想在那里留下一个bug,但由于其他一切都在运行,而且看起来并不“难看”,我说去他妈的,这就是IE,有些东西将不完全按照预期运行,并让它98%正确运行。我不清楚为什么你必须声明你的代码可以工作。显然是这样。我将把你的答案标记为正确答案,因为在大多数情况下,它都是正确答案。碰巧IE对这种特殊的布局很讨厌