Internet Explorer 7 的 CSS 翻转问题答案

【问题标题】：CSS rollover problems with Internet Explorer 7Internet Explorer 7 的 CSS 翻转问题
【发布时间】：2010-10-04 18:35:10
【问题描述】：

我在 HTML 代码中编写了一些 CSS 来创建翻转按钮。然后我尝试用 IE 7 运行它，结果大吃一惊！它不运行。事实上，它同时显示了按钮和底层翻转。如何解决 IE 无法缓存背景图片的问题？最好使用 CSS，但会尝试使用 javascript。

示例 CSS：

 #Menu 
 { 
    width: 100%; 
    height: 32px; 
    margin-top: 93px;
    padding-left: 13px;
}


 #Menu a 
{ 
    height: 32px; 
    line-height: 32px; 
    width: 123px; 
    background: url("img/menu.png") top left no-repeat; 
    background-position: -123px 0; 
    float: left; 
    margin-left: 3px; 
    text-decoration: none; 
    color: #1e1e1d; 
    font-size: 12px; 
    text-align: center; 
}

 #Top #Menu a:hover, #Top #Menu a.active 
{ 
    background-position: 0px 0; 
    text-decoration: underline;
}

【问题讨论】：

请提供一些示例代码。 ie7上的css翻转应该没有任何问题

标签： javascript css internet-explorer

【解决方案1】：

图像翻转问题主要是因为每次悬停链接或标签时下载图像。此闪烁是由删除主图像和加载翻转图像时的延迟引起的（即使它们在技术上是相同的图像，Internet Explorer 更愿意将它们分开处理）。

检查一下翻转问题的完整修复： http://faqspoint.blogspot.com/2011/12/ie-rollover-problem.html

【讨论】：

【解决方案2】：

首先你给出了相互矛盾的指令......

background: url("img/menu.png") top left no-repeat;
background-position: -123px 0;

...背景已经使用速记定位。

我假设您的常规状态和悬停状态都共享相同的图像，那么为什么不同时使用速记呢？删除...

背景位置：-123px 0;

...对于悬停和活动状态，请使用 ...

background-position: bottom left;

然后将您的两种状态都放在一张图片中，一张在另一张下方（我假设这是您一直在尝试的）。

【讨论】：

嘿，谢谢你的建议。我还没有尝试过，但现在听起来很明显。是的，你认为是正确的，我在同一张图片中有两个状态，只是它们不在彼此下方……更像是并排。

【解决方案3】：

尝试确保您的 CSS background 语法正确。某些浏览器允许您以任何顺序指定属性，但 IE 会阻塞。您应该以 X Y（水平然后垂直）的形式指定附件。您目前拥有top left。让它left top。此外，您在行尾有 no-repeat，它应该位于 url 声明之后和位置声明之前。

CSS 背景速记值的顺序应该是：

背景色
背景图片
后台重复
背景位置
背景附件

例如。 background: #fff url(example.jpg) no-repeat left top fixed;

【讨论】：

【解决方案4】：

如果你使用 :hover 伪选择器，那么它在 IE 中不起作用，除非它是一个锚标记。尝试将按钮更改为锚点。您仍然可以使用 css 使其看起来像一个按钮。

如果您想使用 javascript，请查看 jQuery。

【讨论】：