-1

For some reason certain gradients are ceasing to work on IE9 (and that is it as far as I know). On our website there should be a background gradient looking like the sky, and on our main menu navigation mega drop down it should have a blue gradient so that it is joined with the hover from the main nav.

site in question is: http://www.streetstyles4all.co.uk

Can any one advise?

The strange thing is that some gradients are actually working fine. I used a gradient generator to create some of the gradients but I am new to this and am in quite deep and it is beginning to get confusing.

Thanks in advance

Regards

Rob

4

2 回答 2

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

这段代码在所有浏览器中运行得最好，这是一个跨浏览器兼容性，如果你在这方面遇到问题，请告诉我，我会自己看到。

于 2013-05-28T13:09:51.487 回答
0

从我所看到的，这工作得很好。检查以确保您没有在开发人员工具中将 IE9 设置为其他浏览器类型。确保浏览器模式设置为 IE9，文档模式设置为 IE9 标准。

顺便说一句，您的渐变背景没有显示在菜单项的鼠标悬停上的原因是因为您在 li 上使用了 :hover。IE7 和 IE8 不支持 :hover 在<a>标签以外的任何元素上。稍微改变你的 CSS 样式可能会为你纠正这个问题......

#general a:hover {
    // your hover effect
}

...所有版本的 IE 都将支持。当然，您必须首先确保您的<a>标签已调整为显示非悬停图像，并且您已将<a>标签设置为 display:block 以便它可以显示所有内容，但这与尝试获取相比是次要的IE < 9 支持 :hover 在非锚标签元素上。

于 2013-05-28T13:12:46.597 回答