Question

我在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;
}

Answer 1

首先，你提供了相互矛盾的指示......

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

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

我认为你的常规和悬停状态都共享相同的图像，那么为什么不用速记呢？移除...

background-position：-123px 0;

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

background-position: bottom left;

然后将你的两个状态放在一个图像中，一个放在另一个图像下面（我认为这是你一直在尝试的）。

Answer 2

图像翻转问题主要是因为每次在链接或标签上悬停时下载图像。这种闪烁是由于移除主图像并加载翻转图像时的延迟造成的（即使它们在技术上是相同的图像，Internet Explorer也更喜欢单独处理它们）。

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

Answer 3

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

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

Answer 4

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

CSS背景速记值的顺序应为：

背景颜色
背景图像
背景重复
背景位置
背景附件

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

Internet Explorer 7的CSS翻转问题

4 个答案: