使用边框颜色的 Chrome 表格 css 故障

Question

我为选定元素定义了如下表格样式：

tr[selected] {
    background: #FFF;
    border-color: #000000;
    color: #000000;
}

我使用 javascript 应用这种样式：

$this.unbind().change(function () {
        element = $(this).parents('tr');
        if ($(this).is(':selected')) element.attr('selected', '');
        else element.removeAttr('selected')
    });
$this.checkbox();

它的工作原理，我在使用 chrome 时遇到了一个奇怪的故障（例如，firefox 不会发生），有时，在选择和取消选择元素后，仍然应用了边框颜色属性的一部分：

预期：

有时：

这是众所周知的吗？ 这种行为有解决方法吗？

Answer 1

将tr 行的样式设置为display: block;，否则表格元素在其他类型的容器中可能无法按预期运行。这对我有用：

tr {
  display: block;
  background: #fff;
  color: #000;
  border: solid 1px #fff;
}
tr[selected] {border: solid 1px #000;}
tr:not([selected]) {border: solid 1px #fff;}