Question

我想要一个不使用图像的垂直渐变。所以，我已经在Firefox和Chrome上运行了一些CSS，但它在IE9中无效。

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

有什么建议吗？

Answer 1

看起来你错过了IE8＆amp; IE过滤器的最新前缀版本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;

新版本不得破坏（它必须保持在引号之间的一行）..

Answer 2

在使用CSS3设计IE时，

This article from Smashing Magazine可能对您有所帮助。

多年来我学到的一件事是，你的网站在每个浏览器中看起来都不一样，但事实上它可能是一个好处，因为我的IE设计看起来有点不同（但仍然是专业的）和一些喜欢用户界面的用户会访问IE而不是心爱的FireFox或Chrome。

同样使用IE9，添加了很多与CSS3和HTML5的兼容性，使您的网站或网络应用程序在所有浏览器中看起来更加一致变得越来越容易！

只需2美分......我希望它有所帮助。

Answer 3

试试这个......我认为身高：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%;

css垂直渐变背景

3 个答案: