我需要使用 :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);
}
最佳答案
你真的需要阴影出现在伪元素上吗?如果您只是将阴影放在 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 并不关心并将其定位在第一个有效的包含元素上。
关于css - 每个表格单元格的框阴影未在 Firefox 中显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20852099/