Question

我一直在搞乱JS和CSS。我有一个通用按钮样式的锚。在造型方面，我有一个border-bottom: 5px dotted blue;。然后JS是：

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

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

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

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>

FireFox中的奇怪边框错误

1 个答案: