5

所以根据 compass 的说法，在渐变方面，它们只支持 Chrome、Safari、Firefox 3.6 和 Opera。

关于如何在指南针/其他一些解决方法中添加对 IE 的支持的任何想法？

代码在：

  @import "compass";    
   .testgradient {
    @include background(
      linear-gradient(top left, #333, #0c0)
    );
  }

代码输出：

.testgradient {

  background: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #333333), color-stop(100%, #00cc00));

  background: -webkit-linear-gradient(top left, #333333, #00cc00);

  background: -moz-linear-gradient(top left, #333333, #00cc00);

  background: -o-linear-gradient(top left, #333333, #00cc00);

  background: linear-gradient(top left, #333333, #00cc00);
}
4

4 回答 4

4

对于 IE10 之前的 IE 版本，您必须处理 IE 的渐变过滤器。

对于 IE10 和更新版本，无前缀linear-gradient应该可以工作[1]。但是，如果您遇到问题，其他站点只需使用供应商前缀-ms-linear-gradient。这两个版本的语法与所有其他供应商前缀渐变的语法相同。

于 2012-08-21T19:14:42.907 回答
1

您可以简单地创建自己的 mixin，因此您的代码如下所示：

@import "compass";    
@mixin myBackground ($direction, $colorList) {
    background: -ms-linear-gradient($direction, $colorList);
    @include background(linear-gradient($direction, $colorList));
}

.testgradient {
    @include myBackground(top left, (#333, #0c0));
}
于 2013-12-03T17:37:33.080 回答
0

如果您不想浏览整个 SASS 文档，请尝试以下操作：

filter: e("progid:DXImageTransform.Microsoft.gradient( startColorstr=${topcolor}, endColorstr=${bottomcolor},GradientType=0)");
于 2012-09-07T14:31:11.293 回答
0

对于简单的线性渐变，请参阅：http ://compass-style.org/reference/compass/css3/images/#mixin-filter-gradient ，另请参阅：CSS（可能与 Compass）：跨浏览器渐变

因此，您可以使用如下所示的 SCSS 代码：

 @import "compass";
   .testgradient {
    background: #333; /* Old browsers */

    @include background(
      linear-gradient(top left, #333, #0c0)
    );

    @include filter-gradient(#333, #0c0, top left); /* IE 6 - 8 */
  }

上面的代码编译成 CSS 如下：

.testgradient {
  background: #333;
  /* Old browsers */
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwY2MwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #333333), color-stop(100%, #00cc00));
  background: -moz-linear-gradient(top left, #333333, #00cc00);
  background: -webkit-linear-gradient(top left, #333333, #00cc00);
  background: linear-gradient(to bottom right, #333333, #00cc00);
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF333333', endColorstr='#FF00CC00');
  /* IE 6 - 8 */ }
于 2015-07-24T22:24:01.273 回答