1

我有这个使用线性渐变的背景，它在 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里面的条件？这可能吗

这是jsfiddle

4

3 回答 3

2

您的代码在 Internet Explorer 10 中运行良好。如果您希望在早期版本（例如 9 及以下版本）中使用渐变，则应考虑使用该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%); 
}
于 2013-04-30T19:25:17.960 回答
1

CSS 渐变仅在 IE10 中受支持。

包括 IE9 在内的早期版本不支持此功能。

有几种方法可以绕过它，但最好的方法是使用诸如CSS3Pie 之类的 polyfill 脚本，它使用 Javascript 和 VML 来实现旧 IE 版本中的标准 CSS 功能。

于 2013-04-30T19:29:15.100 回答
1

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

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

您可能会发现此工具很有帮助： http: //www.colorzilla.com/gradient-editor/它会自动生成跨浏览器 css 渐变。

于 2013-04-30T19:30:22.817 回答