Question

代码：

body { background-attachment: fixed !important; filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#000000,endColorStr=#3d3c3c); }

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

有没有办法让它在IE8中fixed？我甚至不知道这是一个问题（谷歌找不到任何东西）。

编辑：我创建了一个带有上面代码的测试页面（以及相当多的Lorem Ipsum），并且背景是固定的，就像它应该的那样。所以它必须是我布局中的东西。

Answer 1

看起来你所缺少的就是在身体上设置一个高度。在IE 8中添加此样式适用于我：

html, body {height: 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特定代码放在其他地方并有条件地加载等等。

此测试在IE 8，Firefox 3.6，Chrome 9＆amp; Safari 5（Webkit）但在Opera中不起作用。对于Opera，SVG还是实际背景图片？

过滤器：渐变和背景：固定

1 个答案: