Internet Explorer - CSS table 上的 box-Shadow 不适用于 IE 浏览器

Question

我在 Table 中为 tr 尝试了 box-shadow，并且在 Chrome 中工作正常，但不适用于 IE 浏览器。我检查了 Stack Overflow 上几乎所有建议的链接，但我找不到任何理由和答案。

这是我用的例子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;
    }

我希望这看起来像是一个重复的问题，但希望您能给出正确的解决方案。

Answer 1

您可以将框阴影应用于行，而不是定位行的第一个 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 and IE up to 11 suppress box-shadow in tables with border-collapse:collapse

为了在 IE 中支持您的框阴影，您需要将以下代码块添加到您的样式表中：

table {
    border-collapse: separate;  
}

在您的示例中，这不会对您的 table 样式产生太大影响，因此您应该没问题。

Answer 2

我在 td 上应用了 box-shadow 而不是 tr 并在 css 中进行了一些更改，这适用于 chrome / safari / IE11 / EDGE

这里正在工作 link : 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;
        }