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;
}

OR 添加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

Answer 2

当我使用Chrome时，底部边框颜色不会改变。此代码有效：

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

边框颜色在IE中不起作用

2 个答案: