Question

我使用线性渐变这个背景，它在Chrome，Firefox等现代浏览器中运行完美。但IE只显示白色背景

body {
 font-family: 'champagne__limousinesregular',Georgia, Serif;
 font-size: 14px; 
 background: linear-gradient(0deg, rgba(255, 255, 255, 1)13%, rgba(220, 221, 222, 0.9)100%); 
background: -moz-linear-gradient(0deg, rgba(255, 255, 255, 1)13%, rgba(220, 221, 222, 0.9)100%); 
background: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 1)13%, rgba(220, 221, 222, 0.9)100%); 
background: -o-linear-gradient(0deg, rgba(255, 255, 255, 1)13%, rgba(220, 221, 222, 0.9)100%); 
 }

有没有办法在css中应用此背景并在用户使用IE时执行一些特殊操作？像有条件的内部CSS？这可能吗

here is the jsfiddle

Answer 1

您的代码在Internet Explorer 10中运行正常。如果您希望在早期版本（例如9及更低版本）中使用渐变，则应考虑使用filter属性。您也可以使用这些渐变生成渐变。

请参阅：Gradient Filter

html {
    min-height: 100%;
    background: #000;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFCCCCCC, endColorstr=#FFFFFFFF);
    background: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 1)13%, rgba(220, 221, 222, 0.9)100%);
    background: -moz-linear-gradient(0deg, rgba(255, 255, 255, 1)13%, rgba(220, 221, 222, 0.9)100%); 
    background: -o-linear-gradient(0deg, rgba(255, 255, 255, 1)13%, rgba(220, 221, 222, 0.9)100%); 
    background: linear-gradient(0deg, rgba(255, 255, 255, 1)13%, rgba(220, 221, 222, 0.9)100%); 
}

Answer 2

仅在IE10中支持CSS渐变。

早期版本（包括IE9）不支持此功能。

有几种方法可以解决它，但最好的方法是使用一个polyfill脚本，例如CSS3Pie，它使用Javascript和VML在旧的IE版本中实现标准的CSS功能。

Answer 3

如果您想在IE 6-8中获得完整的跨浏览器支持，则需要使用：

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );

您可能会发现此工具很有用：http://www.colorzilla.com/gradient-editor/它会自动生成交叉的borwser css渐变。

IE浏览器问题与线性渐变

3 个答案: