javascript - FireFox 中的奇怪边框错误

Question

我一直在搞搞 JS 和 CSS。我有一个带有一般按钮样式的锚。在造型方面，我有一个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>