代码之家 › 专栏 › 技术社区 › Dhananjay C

Internet Explorer-表格上的CSS框阴影不适用于IE浏览器

box-shadow css-tables microsoft-edge internet-explorer css

Dhananjay C · 技术社区 · 7 年前

我试过了 box-shadow 对于 tr 在表中,可以很好地用于Chrome,但不适用于IE浏览器。我查看了上几乎所有建议的链接 堆栈溢出 但我找不到任何理由和答案。

这就是我使用的示例 http://jsfiddle.net/c_Dhananjay/h9tx9tpx/ 我的工作地点:

    table tbody tr:hover {
        background-color:#13326b;
        color:#ffffff;
        text-shadow: 1px 2px #000000;
        box-shadow: inset 6px 0px 0px -1px #ff0000;
        -webkit-box-shadow:inset 6px 0px 0px -1px #ff0000;
        -moz-box-shadow:inset 6px 0px 0px -1px #ff0000;
    }

    table tbody tr {
        height:100px;
    }

我希望这看起来像是一个重复的问题,但希望你们能给出正确的解决方法。

2 回复 | 直到 7 年前

Kieran McClung 7 年前

您可以将目标对准行的第一个td,而不是将框阴影应用于行。在视觉上,它给出了完全相同的结果。

table tbody tr:hover td:first-child {  
    -webkit-box-shadow:inset 6px 0px 0px -1px #ff0000;
    -moz-box-shadow:inset 6px 0px 0px -1px #ff0000;
    box-shadow: inset 6px 0px 0px -1px #ff0000;
}

旧答案

根据caniuse的说法。com公司

Edge和IE高达11在具有边框折叠的表中抑制方框阴影:折叠

为了在IE中支持方框阴影,您需要在样式表中添加以下代码块:

table {
    border-collapse: separate;  
}

在您的示例中,这不会对表的样式产生太大影响,因此您应该很好。

Dhananjay C 7 年前

我申请了 box-shadow 在…上 td 而不是 tr 对css进行了一些更改,这适用于chrome/safari/IE11/EDGE

以下是工作链接: https://jsfiddle.net/h9tx9tpx/2/

工作代码:

      // css file
        table tbody tr {
            background-color:#13326b;
            color:#ffffff;
            text-shadow: 1px 2px #000000;
        }

        table tbody tr {
            height:70px;
        }

        table {
            border-collapse: separate;  
        }

        td:first-child:before{
            box-sizing: border-box;
            content:'';
            position:absolute;

            left:0;
            right:2px;

            display: block;
            height: 60px;
            box-shadow: inset 6px 0px 0px -1px #ff0000;
            -webkit-box-shadow: inset 6px 0px 0px -1px #ff0000;
        }

推荐文章