jquery - 边框颜色在 IE 中不起作用

Question

在发布之前，我已经尽我所能尝试解决这个问题，但我就是无法让它工作。

我有一个用于删除表格行的按钮，该按钮在删除之前要求确认并用红色背景/边框突出显示该行。在 Chrome 和 Firefox 中，这可以正常工作，但在 IE 中不行，背景可以工作，但边框顶部/底部不会改变颜色。

如果事先更改 border-color 属性，它会起作用，所以我认为问题出在 jquery css 函数中。

在 JSFiddle 中，我创建了这个问题的一个小示例，在 IE 中它不起作用，而在 Firefox/Chrome 中它起作用了，然后我看到一个主题，他们说将边框添加到 td。我这样做了，在 Chrome 中，边框停止在 td 上工作，而在 IE 中，边框开始在 td 的相反元素上工作。

JSFiddle

<table width='100%' style='border-collapse:collapse;'>
    <tr style="border-top:1px solid #DDDED9; border-bottom:1px solid #DDDED9" class='tr'>
        <td>test</td>
        <td>test</td>
        <td>test</td>
    </tr>
</table>

<p>
    <button class='button'>Click</button>
</p>

jQuery

$('.button').on('click', function(){
    $('.tr').css('border-top-color', 'red');
    $('.tr').find('td').css('border-bottom-color', 'red');
});

如果有人可以帮助我在所有三种浏览器中找到一个可行的解决方案，那就太好了。

Answer 1

先定义边框，再添加边框颜色。

td {
   border-bottom:1px solid transparent;
}

或在Jquery中添加'border-bottom', '1px solid red'

$('.button').on('click', function(){
    $('.tr').css('border-top-color', 'red');
    $('.tr').find('td').css('border-bottom', '1px solid red');
});

你为什么不改变 tr 的边框颜色例如

$('.button').on('click', function(){
    $('.tr').css('border-color', 'red');
});

Fiddle