2

有问题的网站：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 值、添加额外的块， ETC。

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

如果您想要任何其他代码片段，请告诉我。这是一个非常有趣的问题，我真的很想解决这个问题。

4

1 回答 1

1

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

那么你有什么选择呢？

  • 你可以尝试使用 CSS3Pie 来渲染你的渐变。它使用 VML 而不是过滤器，因此不会遇到相同的错误。（或者您可以自己编写 VML 代码，但这会很乏味）

  • 或者您可以在 IE8 中使用图形作为渐变。您可以安排 CSS 代码，使标准 CSS 渐变覆盖背景图形，因此其他浏览器可以继续使用 CSS 渐变并且不需要了解图形。

  • 或者你可以接受 IE8 是一个旧的浏览器，并给它一个纯背景而不是渐变。它可能看起来不那么漂亮，但它仍然可以工作，而且仍然使用 IE8 的人现在可能已经习惯了看到看起来不是最好的网站。

于 2013-04-03T21:10:01.657 回答