Question

这是我的代码，它完全适用于所有，但是！活动根本不会触发

    a.Button span {
background: transparent url('images/form_sprite.png') no-repeat 0 0;
display: block;
height:45px;
line-height: 30px;
padding: 7px 0 5px 20px;
color: #fff;
background-position: 0 -44px;
}

a.Button {
background: transparent url('images/form_sprite.png') no-repeat top right;
display: block;
float: left;
height: 45px;
margin-right: 6px;
padding-right: 27px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}

a.Button:hover span {
background-position: 0 -136px;
}

a.Button:hover {
background-position: right -90px;
}

a.Button:active span {
background-position: 0 -225px;
}

a.Button:active {
background-position: right -181px;
}

这是html：

<div class="clearbutton"> <a class="Button" href="#"><span>Button text</span></a> </div>

有什么想法吗？

Answer 1

尝试在您的CSS中将a.Button:active更改为a.Button span:active。这似乎是解雇了:active css，但仍然可以在Chrome中使用。

Answer 2

是的，只有用户在该对象上直接点击时，才会在IE中触发:active伪类。在这种情况下，链接。如果您单击子对象（跨度），则不会触发链接的活动事件。

正如Aninemity所说，你可以将风格应用于span:active（正确的方法）。但在IE6 / 7中，:active仅针对链接触发。如果你需要IE6 / 7支持，你必须找到一些方法来摆脱跨度。

CSS - 图像精灵：主动不工作即

2 个答案: