Question

由于某些原因，某些渐变停止在IE9上工作（据我所知就是这样）。在我们的网站上应该有一个看起来像天空的背景渐变，在我们的主菜单导航mega下拉它应该有一个蓝色渐变，以便它与主导航中的悬停连接。

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

任何人都可以提供建议吗？

奇怪的是，有些渐变实际上工作正常。我使用了一个渐变生成器来创建一些渐变，但我是新手，并且处于非常深的状态，并且开始变得混乱。

提前致谢

此致

罗布

Answer 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 */

此代码在所有浏览器中效果最佳，这是一个跨浏览器兼容性，如果你遇到问题，请告诉我，我会自己看看。

Answer 2

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

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

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

所有版本的IE都支持

....当然，您必须确保调整<a>代码以显示非悬停图片，并且您已将<a>标记设置为显示：阻止以便显示一切，但与试图获得IE＆lt;相比，这是微不足道的9支持：将鼠标悬停在非锚标签元素上。

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

2 个答案: