css - 每个表格单元格的框阴影未在 Firefox 中显示

Question

我需要使用 :before 伪元素为每个表格单元格制作框阴影。它在除 firefox 之外的所有浏览器中都能完美运行。

http://fiddle.jshell.net/UXeBj/4/

html

<table class="c-table ">
    <tr class="th">
        <td>column1</td>
        <td>column2</td>
        <td>column3</td>
    </tr>
    <tr>
        <td>row1</td>
        <td>row2</td>
        <td>row3</td>
    </tr>
    <tr>
        <td>row4</td>
        <td>row5</td>
        <td>row6</td>
    </tr>
    <tr>
        <td>row7</td>
        <td>row8</td>
        <td>row9</td>
    </tr>
    <tr>
        <td>row10</td>
        <td>row11</td>
        <td>row12</td>
    </tr>
</table>

CSS

.c-table tr > td {
    position: relative;
    padding: 5px;
}
.c-table td:before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content:'';
    -moz-box-shadow: inset 0 0 4px rgba(0, 0, 0, 1);
    -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 1);
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 1);
}

Answer 1

你真的需要阴影出现在伪元素上吗？如果您只是将阴影放在 td 本身上，您可以获得相同的效果，并且它应该可以跨浏览器工作。

http://fiddle.jshell.net/UXeBj/14/

CSS:

.c-table td {
    -moz-box-shadow: inset 0 0 4px rgba(0, 0, 0, 1);
    -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 1);
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 1);
}

这不适用于伪元素的原因是因为根据规范 tds、trs 等不能包含绝对定位的元素。当您尝试绝对定位一个元素时，它可能在某些浏览器中有效，但我不相信规范为此定义了行为。所以浏览器处理它的方式可能不同。看起来基于 Webkit 的浏览器会尝试将 td 视为 block 级元素，而 Gecko 并不关心并将其定位在第一个有效的包含元素上。