Question

在Gridview中，我根据特定条件添加一个CSS类。这个类在行的边框添加了一个插入框阴影，它在FireFox中工作正常。在IE中它添加了行阴影，但它在单元格级别添加它，因此单元格左侧和右侧的单元格边框也会突出显示。当我只想突出显示行时，这会显示插入光晕的每个单元格边框。

Chrome就像IE一样，但没有插入框阴影。它只为边框着色。

正如我所说，它在FF中看起来不错。关于如何在IE浏览器中修正此问题的任何想法......以及Chrome框，其中框阴影仅为边框着色，但我可以忍受它。

Css Class

.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

尝试设置样式：第一个孩子和：行中的最后一个孩子TD是不同的。

以下是stack上的链接。但是，您将不得不改变您的jQuery来容纳单个td单元格，这将是一个更多的工作。

在IE中，为什么在将类添加到行中时单元格边框不会变为彩色？

1 个答案: