Question

有问题的网站：http://atlanticsig.creativecurvedev2.ca/

一点背景......这是我在MODx中使用Wayfinder扩展菜单和子菜单Ultimate Dropdown构建的客户端的开发站点。我正在使用CSS渐变来为菜单生成漂亮的背景颜色。

我的问题是，在IE8中，当我合并“过滤器”渐变背景颜色时，标题导航不会显示下拉菜单。只有IE8浏览器有这个问题;即使IE7正常工作。从技术上讲，下拉菜单就在那里，因为光标可以点击子菜单链接，但是浏览器拒绝显示它们。

我已经通过使用IE8的重复背景图像解决了这个问题，但我真的不想走这条路线;我确信应该有一个CSS解决方案，这就是我发布这个的原因;我的好奇心被激发了，我想看看真正的问题是什么。

我能够找到这行代码的问题：

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-8 */

只要我从下面的代码块中删除了这一行，下拉菜单就可以在IE8中正常工作，但渐变会消失：

#header_menu {
background: -moz-linear-gradient(top,  #003764 0%, #3b6b89 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#003764), color-stop(100%,#3b6b89)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #003764 0%,#3b6b89 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #003764 0%,#3b6b89 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #003764 0%,#3b6b89 100%); /* IE10+ */
background: linear-gradient(to bottom,  #003764 0%,#3b6b89 100%); /* W3C */
background-color: #003764; /* Old browsers */
height: 38px;
width: auto;
}

我尝试了HTML和CSS中的一些修复，包括渐变的各种排列，将渐变应用于不同的元素，将不同的高度/宽度/位置值应用到我的容器和菜单，使用z-index值，添加额外的块等。

最后，似乎总是回到那个“过滤器”行（我甚至尝试过-ms-filter - ）。

如果你想要任何其他代码段的片段，请告诉我。这是一个非常有趣的问题，我让我真正好奇地解决了。

Answer 1

老实说，使用IE的filter风格总是在寻找麻烦 - 它有一大堆错误和怪癖可能会意外破坏其他东西。

那你有什么选择？

您可以尝试使用CSS3Pie渲染渐变。它使用VML而不是过滤器，因此它不会遭受相同的错误。（或者您可以自己编写VML代码，但这将是乏味的）
或者您可以在IE8中使用渐变图形。您可以安排CSS代码，使标准CSS渐变覆盖背景图形，因此其他浏览器可以继续使用CSS渐变，而不需要了解图形。
或者您可以接受IE8是一个旧的浏览器并给它一个简单的背景而不是渐变。它可能看起来不是很漂亮，但它仍然可以工作，而且仍然使用IE8的人可能习惯看到这些天看起来不太合适的网站。

IE8中的CSS Gradient禁用我的下拉菜单

1 个答案: