javascript - FireFox 中奇怪的边框错误

Question

我一直在搞 JS 和 CSS。我有一个带有一般按钮样式的 anchor 。在样式中，我有一个 border-bottom: 5px dotted blue;。那么JS就是:

onmouseover = "this.style.borderBottom = '5px solid red';"

他就是 JSFiddle 例子:http://jsfiddle.net/MichaelMitchell/f4Ud4/将鼠标悬停在按钮上

边界似乎重叠了，有人可以解释一下吗？由于 Chrome 处理虚线边框的方式，这仅在 FireFox 中可见。

Answer 1

我无法解释错误行为。显然，当绘制另一个边框时，firefox 不会清除绘图区域。

但这是一个(肮脏的)解决方案

<a class = 'testButton' href = '#'
    onmouseover =
    "var button = this; button.style.borderBottom = '0px'; setTimeout( function() { button.style.borderBottom = '5px solid red'; }, 1 )">
    Button!
</a>