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

Question

我需要使用：在伪元素之前为每个表格单元格制作盒子阴影。它在除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);
}

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