CSS在不同浏览器中改变颜色

Question

我正在构建的网站上遇到了一个有点奇怪的错误。

使用 Chrome/Firefox/Safari/IE10 可以正常工作。但是，使用IE9它会变成蓝色！怎么了？

我怀疑这段代码搞砸了（@colorOne，@colorTwo 被实际颜色替换）：

.gradient (@colorOne, @colorTwo) {
    background: @colorOne; /* Old browsers */
    background: -moz-linear-gradient(top,  @colorOne 0%, @colorTwo 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@colorOne), color-stop(100%,@colorTwo)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  @colorOne 0%,@colorTwo 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  @colorOne 0%,@colorTwo 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  @colorOne 0%,@colorTwo 100%); /* IE10+ */
    background: linear-gradient(to bottom,  @colorOne 0%,@colorTwo 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@colorOne', endColorstr='@colorTwo',GradientType=0 ); /* IE6-9 */
}

Answer 1

您的 CSS 中的 #top 元素和您网站中的其他元素有一个蓝色的 Microsoft 过滤器渐变。但是由于您是专门询问标题，所以只需删除：

#top {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@colorOne', endColorstr='@colorThree', GradientType=1);
  /* Remove this from any other element you wish to be green */
}

Answer 2

唯一的区别是渐变只能由 IE 解释：

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@colorOne', endColorstr='@colorThree', GradientType=1

只需删除它。