【问题标题】:Background image not displaying in link or hover states in IE7 and IE8 only仅在 IE7 和 IE8 中不以链接或悬停状态显示背景图像
【发布时间】:2012-05-18 06:24:52
【问题描述】:

我正在使用超级鱼菜单来显示购物车图标。将鼠标悬停在购物车图标上时,菜单会下拉。链接状态包含购物车的背景图像。将鼠标悬停在链接上时,背景图像被切换为较暗的图像,并且周围的空间被白色填充。这似乎在 FF 中运行良好,但我在 IE7 和 IE8 中都遇到了问题。在 IE7 和 IE8 中,问题是背景图像不会显示为链接状态或悬停状态。只有当我在安装了 IE7 和 IE8 的实际机器上检查它时才会发生这种情况。在选择了相应的浏览器模式后,它似乎无法在 IE9 中运行。似乎也没有在虚拟机上复制。 问题是:是什么原因导致图像在 IE7 和 IE8 中无法显示?代码有点太长,无法在此处粘贴。

更新了 JS Fiddle http://jsfiddle.net/SeasonEnds/nfYDC/2/

【问题讨论】:

    标签: css menu superfish


    【解决方案1】:

    根据您的小提琴,您在悬停时将背景设置为图像和“无”。

    .cart li:hover, .cart li.sfHover,
    .cart a:focus, .cart a:hover, .cart a:active {
        background:#fcfcfc;
    }
    

    尝试仅设置背景颜色,而不是使用背景的简写,这意味着在未设置任何内容时背景图像为“无”。那里可能存在一些冲突(如果您的小提琴 CSS 有有效的图像引用,会更容易测试)。

    【讨论】:

    • 很抱歉。我粘贴了错误的链接。原始帖子链接更改为带有虚拟图片的链接。
    • 我浏览了整个 superfish css 文件并将所有背景:没有图像的声明更改为背景色。这确实导致了购物车图像的一些奇怪的级联,我必须通过返回并添加背景图像来解决这个问题:无。这显示了悬停时图像的一小部分,但仅此而已。我现在认为可能需要在购物车背景的 li 中添加高度和宽度。
    • 所以,这就是答案。上面的步骤显示了图像,然后我所要做的就是通过将 a.newcart:link 更改为 .newcart 来停止对 IE7 和 IE8 如此具体。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-02-10
    • 2011-08-17
    • 1970-01-01
    • 2012-04-14
    • 1970-01-01
    相关资源
    最近更新 更多