Internet Explorer 7的CSS翻转问题

I wrote some CSS in my HTML code to create rollover buttons. Then i tried to run it with IE 7 and surprise! it doesn't run. In fact it shows both the button and underlying rollover. How can i get around IE's inability to cache background images? Preferably using CSS but javascript 'will' be tried.

我在我的HTML代码中写了一些CSS来创建翻转按钮。然后我试着用IE 7运行它并惊喜!它没有运行。实际上它显示了按钮和底层翻转。我怎样才能解决IE无法缓存背景图像的问题?最好使用CSS但javascript'将'尝试。

Sample 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;
}

4 个解决方案

#1

Well firstly you are giving conflicting instructions ...

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

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

... the background is already positioned using shorthand.

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

I assume that your regular and hover states both share the same image, so why not do both with shorthand? Remove...

我假设您的常规状态和悬停状态都共享相同的图像,那么为什么不用速记呢?去掉...

background-position: -123px 0;

background-position:-123px 0;

... and for your hover and active states, use ...

...对于你的悬停和活跃状态,请使用......

background-position: bottom left;

Then have both your states in one image, one below the other (which I assume is what you've been trying anyway).

然后让你的状态在一个图像中,一个在另一个下面(我认为这是你一直在尝试的)。

#2

Image rollover issue comes mainly because of downloading image every time on hovering a link or tab. This flicker is caused by the delay when the primary image is removed and the rollover image is loaded (even though they are technically the same image, Internet Explorer prefers to treat them separately).

check it out complete fix for rollover issue: http://faqspoint.blogspot.com/2011/12/ie-rollover-problem.html

图像翻转问题主要是因为每次悬停链接或标签时都会下载图像。这种闪烁是由主图像被移除并加载翻转图像时的延迟引起的(即使它们在技术上是相同的图像,Internet Explorer也更喜欢单独处理它们)。检查滚动问题的完整修复:http://faqspoint.blogspot.com/2011/12/ie-rollover-problem.html

#3

if you are using the :hover pseudo-selector, then it won't work in IE unless it is an anchor tag. Try changing the button into an anchor. You can still make it look like a button using css.

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

If you want to use javascript, then have a look at jQuery.

如果你想使用javascript,那么看看jQuery。

#4

Try making sure your CSS background syntax is correct. Some browsers let you specify the properties in any order however IE will choke. You should specify the attachment in the form X Y (horizontal then vertical). You currently have top left. Make it left top. Also you have no-repeat at the end of the line, it should come just after the url declaration and before the position declaration.

尝试确保您的CSS背景语法正确。某些浏览器允许您以任何顺序指定属性,但IE会阻塞。您应该以X Y(水平然后垂直)的形式指定附件。你现在有左上角。让它保持最佳状态。此外,你在行的末尾没有重复,它应该在url声明之后和位置声明之前。

The order for CSS background shorthand values should be:

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

background-color
background-image
background-repeat
background-position
background-attachment

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

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

#1