CSS Sprite在IE中不起作用[8/7/6] [英] CSS Sprites don't work in IE[8/7/6]

问题描述

我正在尝试使用CSS使用精灵为我的Risk Matrix设置动画……它在Firefox和Chrome中可以正常工作，但是图像不会在IE中显示...

I'm trying to CSS use sprites to animate my Risk Matrix ... it works just fine in Firefox and Chrome, but image won't show up in IE ...

下面是代码，不想将整个内容粘贴到此处，但是摘录显示了模式:

The code is below, don't want to paste the whole thing in here, but the excerpt shows the pattern:

<dl id="rmMap4x4">
<dd id="m4p4s1">
<a onclick="setDropDownListValues(4,1,3,4)" onmouseover="setDropDownListValues(4,1,-1,4)">
</a>
</dd>
<dd id="m4p3s1">
<a onclick="setDropDownListValues(3,1,2,4)" onmouseover="setDropDownListValues(3,1,-1,4)">
</a>
</dd>
...
</dl>

CSS:

dl#rmMap4x4
{
background:  url(/images/RiskMatrix_4x4.png) no-repeat scroll left top;
height: 400px;
margin: 0pt;
padding: 0pt;
position: relative;
width: 400px;
}
/*column 1*/
dd#m4p4s1 a
{
top: 99px;
left: 99px;
}
dd#m4p4s1 a:hover
{
position: absolute;
background:  url(/images/RiskMatrix_4x4.png) -98px -500px no-repeat;
top: 100px;
left: 99px;
}
dd#m4p3s1 a
{
top: 149px;
left: 99px;
}
dd#m4p3s1 a:hover
{
position: absolute;
background:  url(/images/RiskMatrix_4x4.png) -98px -550px no-repeat;
top: 150px;
left: 99px;
}

我用IE Dev检查了样式.工具栏(我想要IE的Firebug)，并且所有样式都已放置在服务器上，但无法在IE中显示！！！

I checked the styles with IE Dev. toolbar (i want firebug for IE), and all styles are in place, image in on the server, but it WON'T SHOW IN IE !!!

我很确定这是一个愚蠢的IE CSS怪癖，请帮忙.

I'm prettty sure it's some stupid IE CSS quirk, please help.

更新:@RoBorg:您的建议并不能解决问题，但可以解决悬停"问题.问题出在绝对定位的外部div和某些菜单样式中，这些以某种方式使整个事情搞砸了.

UPDATE: @RoBorg: your suggestion didn't solve the problem, but it solved the "hover" issue. The problem turned out to be in with the absolutely positioned outer div and some menu styles, those somehow screwed the whole thing up.

推荐答案

在没有href的情况下，IE不会将:hover应用于<a>.这应该起作用:

IE doesn't apply :hover to <a>'s without an href. This should work:

<a href="#" onclick="setDropDownListValues(3,1,2,4); return false;"
     onmouseover="setDropDownListValues(3,1,-1,4);">

这篇关于CSS Sprite在IE中不起作用[8/7/6]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！