css - Internet Explorer - CSS box-Shadow on table 不适用于 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;  
}

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