Question

我在表格中为box-shadow尝试了tr，适用于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和IE最多可以抑制带有边框折叠的表格中的框阴影：折叠

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

table {
    border-collapse: separate;  
}

在你的例子中，这并不会影响你桌子的样式，所以你应该没事。

Answer 2

我在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;
        }

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

2 个答案: