使用JQuery RemoveClass时浏览器重画错误的解决方法

我的web应用程序中有一个表，我实现了一个事件处理程序，允许用户通过单击表中的一行来选择数据元素。为了直观地突出显示所选元素，我给它一个边框。当选择新行时，我从旧元素中删除所选的类（边框），并将其添加到新行中

我的事件侦听器代码似乎工作正常。我已经使用chrome的开发工具验证了该类是否从旧元素中删除并添加到新选择的元素中。但是，在调用removeClass（）后，浏览器未正确删除边框

在chrome（18.0.1025.151）中进行测试时，新选择的元素显示有边框，而先前选择的元素仍显示部分边框（边框的底部和右侧部分仍被绘制）。当我在FF 11中测试时，会出现类似的绘图错误。在firefox中，新选中的行仅绘制边框的左/右/底部，顶部不显示。导致重画的事件（如调整浏览器窗口大小）修复了边框绘制问题

是否有人提供问题原因的信息/链接。更重要的是，在用户选择新行后，我是否可以实现一种变通方法

正在添加/删除的CSS类

.uiSelectedLHPlanRow { border: 1px solid purple; }

HTML

---

看起来像是边界塌陷的问题。如果显式设置了

边框折叠：separate它似乎工作得更好（尽管您可能需要调整样式）。设置为
边框折叠：折叠导致问题返回

例如：

CSS

这需要一份工作。非常感谢您的帮助。我用我的web应用程序进行了测试，确认这个解决方案解决了chrome 18和ff 11的问题。@RyanThomas-很高兴我能提供帮助。请参阅本节关于投票和标记正确答案（）。
<table id='lhPlansTable' class='uiLHPlansTable'>
</table>

'<tr id=\'' + GENERATED ID + '\' class=\'uiLHPlanTableRow\'><td class=\'uiLHPlanDriverTableCell\'>' + GENERATED DATA1  + '</td><td>' + GENERATED DATA2 + '</td></tr>'

$('#lhPlansTable').on('click', 'tr.uiLHPlanTableRow', function () {

    ... flow control ...

    $('.uiSelectedLHPlanRow').removeClass('uiSelectedLHPlanRow');
    $(this).addClass('uiSelectedLHPlanRow');


    // TODO: WORKAROUND FOR DRAWING BUG ??
}

tr.uiSelectedLHPlanRow > td { 
    border-top: 1px solid purple; 
    border-bottom: 1px solid purple; 
}

table.uiLHPlansTable{
    border-collapse:separate;
}​