css - 关于 a:active in ie7 和 ie8 的不同外观

Question

最近我遇到了一个让我很困惑的错误。例如，我在这里放了一个标签，它有一个样式 a{font:14px}和a.active{font:18px}。在 ie8 中，这项工作很完美。当我点击标签时，它的字体大小变成了 18px，当我松开鼠标时，它变成了 14px。然而在ie7中，当我点击标签后，它的大小变成了18px，当我释放鼠标时，它的字体大小没有改变。如果我点击页面的其他区域，它的字体大小又变回了14px；我

    .button:active{
         font-size:18px;
}

Answer 1

正在发生的事情是 IE7 正在考虑锚点仍然“活跃”，因为它还没有失去焦点。这实际上是有道理的（也许不是）。但是，其他浏览器会在释放鼠标按钮后立即认为它处于非活动状态，我们通常认为这是理所当然的。

如果您真的想处理链接上mousedown的mouseup事件，我认为您需要在 JS 中处理它：

纯JS解决方案

var a = document.getElementById("myLink");
a.onmousedown=function(){
    this.setAttribute("class", "active");
};

a.onmouseup=function(){
    this.setAttribute("class", "");
};

jQuery解决方案

var $a=$('#myLink');
$a.mousedown(function(){
   $(this).addClass('active');
   // this is actually much more scalable, if you don't mind using jQuery
});

$a.mouseup(function(){
   $(this).removeClass('active'); // and this as well
});