Question

最近我遇到了一个让我困惑的错误。例如，这里我放了一个标签，它有一个风格 a{font:14px}和a.active{font:18px}。在ie8中，这项工作非常完美。当我点击标签时，它的字体大小变为18px，当我释放鼠标时，它变为14px。然而在ie7中，在我点击标签后，它的大小变为18px，当我释放鼠标时，它的字体大小没有改变。如果我cilck页面的其他区域，它的字体大小变回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
});

关于a的不同外观：在ie7和ie8中有效

1 个答案: