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

只需将其删除即可。

CSS改变不同浏览器的颜色

2 个答案: