IE8不显示背景渐变

时间:2015-01-16 16:41:07

标签: internet-explorer background internet-explorer-8 gradient

我们遇到与此网站向后兼容的问题:http://www.c2-it.com/clients/vetshome

菜单栏(nav)具有使用css生成器应用的背景渐变。我们已经将这个用于许多网站而没有任何问题。然而,在IE8上,菜单栏的背景呈现为白色。在IE8中使用开发人员工具时,过滤器显示为应用于导航,但它不显示。

以下是应用于导航的样式表部分:

nav {
    background: #002157; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMjE1NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyZDk1ZTUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #002157 0%, #2d95e5 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#002157), color-stop(100%,#2d95e5)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #002157 0%,#2d95e5 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #002157 0%,#2d95e5 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #002157 0%,#2d95e5 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #002157 0%,#2d95e5 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002157', endColorstr='#2d95e5',GradientType=0 ); /* IE6-8 */
    height:47px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
}

FWIW在所有Mac浏览器和IE9及更高版本上看起来都很好。

感谢任何想法。

1 个答案:

答案 0 :(得分:0)

您可以尝试将GradientType设置为1.这是另一个类似的question