css垂直渐变背景
问题描述:
我想要一个不使用图像的垂直渐变。所以,我已经有了一些CSS在Firefox和Chrome上工作,但它不能在IE9中工作。css垂直渐变背景
background: #fff;
background: -moz-linear-gradient(top, #46a5e5, #ffffff);
background: -webkit-gradient(linear, left top, left bottom, from(#46A5E5), to(#ffffff));
filter: progid:DXImageTransform.Microsoft.gradient(StartColorstr='#46A5E5', EndColorstr='#ffffff', GradientType=0);
有什么建议吗?
答
看起来像你错过了到IE过滤器的日期前缀版本IE8 & 9 ..虽然上了年纪还在IE8工作
尝试:
filter: progid:DXImageTransform.Microsoft.gradient(StartColorstr='#46A5E5', EndColorstr='#ffffff', GradientType=0); /* IE6/7/8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#46a5e5', endColorstr='#ffffff')"; /* IE8/9 */
zoom: 1;
新版本必须不会被打破(它必须留在引号之间的一行)..
答
This article from Smashing Magazine在为使用CSS3的IE进行设计时可能对您有所帮助。
多年来我学到的一件事是你的网站在每个浏览器中看起来不完全相同,事实上它可以是一个好处,因为我有过这样的情况, IE浏览器(但仍然很专业)和一些喜欢用户界面的用户会使用IE访问,而不是喜欢的FireFox或Chrome。
此外,随着IE9,CSS3和HTML5的许多兼容性已被添加,所以使您的网站或Web应用程序在所有浏览器中看起来一致变得越来越简单!
只是我的2美分...我希望它有帮助。
答
试试这个...我认为高度:1%会解决这个问题
background: #fff;
background: -moz-linear-gradient(top, #46a5e5, #ffffff);
background: -webkit-gradient(linear, left top, left bottom, from(#46A5E5), to(#ffffff));
filter: progid:DXImageTransform.Microsoft.gradient(StartColorstr='#46A5E5', EndColorstr='#ffffff', GradientType=0);
height: 1%;
我尝试了所有在一行,并尝试了确切的代码在代码块的方式,但也正在努力在IE9上。 – Charlie 2011-06-10 13:17:42
@SquireCD,对不起,没有9来检查(没有Win7,我爱我的XP!),但我**认为**我已经读过某处,但现在找不到,当然,规则的顺序可能是重要的..你有没有尝试只用'-ms-filter'规则 - 不需要缩放 - 看看它是否在IE9中工作,并且背景(或背景色)是透明的?你可以给一个IE9的例子不工作,我可以测试其他8个可以测试9 ..我敢肯定,我们会到达那里:) - 补充:事后......有没有其他过滤器涉及到这里。 。 – clairesuzy 2011-06-10 17:47:55
不涉及其他过滤器。直到星期一我回到办公室时(在家只有Linux),我无法测试IE上的任何更改。 我不确定它是否有帮助,但这是我的整个CSS文件:http://pastebin.com/B2cWuAi9 类.headBodyFoot是我需要的渐变。 PS:道歉的草率代码。我对CSS很新。 – Charlie 2011-06-11 02:42:53