在ie9中无法点击的css精灵图像

Question

我创建了一个带有<a>标记的按钮，并且嵌套在内部。跨度保存按钮的图标：我使用了背景图像，这是精灵图像。

在chrome和FF上一切都很棒，但在IE9中按钮的图像不可点击。即，当我点击所谓的图标时，没有任何事情发生 - 没有动作或样式出现。

下面是按钮的HTML：

<a class="btn"  href="#" title="Cancel">
    <span class="icon iconCancel"></span>Cancel
</a>

我更新了我的小提琴：

http://jsfiddle.net/EWppd/20/

谢谢！

Answer 1

它看起来在这里工作正常...只是尝试在你的跨度上声明宽度和高度，在你的跨度上保存图标并再次测试。

这样的事情：

.btn > span { 
display: inline-block;
border:1px solid #000;
width:20px;
height:20px;

}

如果不起作用，您也可以尝试在“a”标签上使用一些值更高的z-index（尽管根本不需要）。

Answer 2

你的小提琴似乎没有说明问题。

要执行此操作，您需要为a和span提供宽度和高度，将a设置为position: relative，将范围设置为position: absolute; top: 0; left: 0; }。然后在跨度上设置背景图像，并在a悬停时移动其位置。