在IE中，当类添加到行中时，为什么单元格边框不着色？

Question

在Gridview中，我根据特定条件添加了一个行CSS类。这个类向行的边界添加了一个插入框阴影，它在FireFox中运行良好。在IE中，它会添加行阴影，但它会在单元格级别添加行阴影，因此单元格左右两侧的单元格边界也会高亮显示。当我只想高亮显示行时，这会显示每个单元格边框的插入光晕。

Chrome与IE类似，但没有插入框阴影。它只为边框上色。

正如我所说，它在FF中看起来很好。关于如何在IE中纠正这一点的任何想法...Chrome，盒子阴影只给边框着色，但我可以接受。

Css类

.rowGlow
{
border-collapse:separate;
border-color:#ff0000;

box-shadow:inset 0 0 3px 1px  #ff0000; 
-moz-box-shadow:inset 0 0 3px 2px #ff0000;
-webkit-box-shadow:inset 0 0 3px 2px #ff0000;
}

行标签

<tr class="rowGlow" style="color:#333333;background-color:#F7F6F3;">

jQuery将css类添加到行中，具体取决于行中的隐藏值

        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
    function EndRequestHandler(sender, args) {if (args.get_error() == undefined) {alertTest();}}

    function alertTest() {
        $(document).ready(function () {
            $('tr').each(function () {
                if ($(this).find('input[type=hidden]').val() == 'False') {
                    var du = <%= DateUpdates() %>;
                    if(du){$(this).addClass('rowGlow');}
                }
            });
        });
    }

    alertTest(); 

这就是我的结局。将jQuery更新为此添加了两个额外的CSS类，一个用于第一个TD，另一个用于最后一个TD：

$(this).addClass('rowGlow').find('td:first-child').addClass('firstCell');
$(this).find('td:last-child').addClass('lastCell');
.rowGlow
{
-webkit-box-shadow:inset 0 -3px 3px -1px #ff0000,inset 0px 3px 3px -1px #ff0000;
-moz-box-shadow:   inset 0 -2px 3px -1px #ff0000,inset 0px 2px 3px -1px #ff0000;
box-shadow:        inset 0 -3px 3px -1px #ff0011,inset 0px 3px 3px -1px #ff0000;    
}

.firstCell
{
-webkit-box-shadow: inset 3px 0px 3px -2px #ff0000;
-moz-box-shadow:    inset 3px 0px 3px -2px #ff0000;
box-shadow:         inset 3px 0px 3px -2px #ff0000;
    }
.lastCell 
{
-webkit-box-shadow: inset -3px 0px 3px -2px #ff0000;
-moz-box-shadow:    inset -3px 0px 3px -2px #ff0000;
box-shadow:         inset -3px 0px 3px -2px #ff0000;
}

<!-- For IE8 and lower I have this conditional -->
    <!--[if lt IE 9]>
    <style type="text/css">
        .rowGlow {
                background-color: #F9ACAA !important;
                /* color: #000!important; */
        }
    </style>
<![endif]-->

Answer 1

试着将行中的：first child和：last child TD设置为不同的样式，怎么样。

这是堆栈上的链接。然而，您必须修改jQuery以适应各个td单元，这将需要更多的工作。