CSS渐变突然不能在IE9中工作

-1

由于某些原因，某些渐变在IE9上停止工作（就我所知，这就是它）。在我们的网站上应该有一个看起来像天空的背景渐变，并且在我们的主菜单导航大型下拉菜单中应该有一个蓝色渐变，以便它与主导航栏中的悬停一起加入。CSS渐变突然不能在IE9中工作

网站的问题是：http://www.streetstyles4all.co.uk

任何一个可以建议？

奇怪的是，一些渐变实际上工作正常。我使用梯度发生器来创建一些渐变，但我对此很陌生，而且相当深入，它开始变得混乱。

在此先感谢

问候

罗布

来源

2013-05-28 SS4A

您可能希望更具体地了解哪些渐变看起来不能正常工作。例如，在Developer Tools中将IE设置为IE8或IE7时，除了应该出现在菜单的鼠标悬停上的渐变背景之外，所有渐变看起来都可以像Firefox一样工作。 –

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-28 13:09:51

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

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

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

...将在所有版本的IE中支持。当然，你必须确保你的<a>标签被调整为显示非悬停图像，首先，你已经将<a>标签设置为display：block，这样它可以显示所有内容，但与尝试获取IE < 9支持：悬停在非锚点标记元素上。

来源

2013-05-28 13:12:46

CSS渐变突然不能在IE9中工作

回答

相关问题