Box-shadow for each table cell not showing in Firefox - css

Question

I need to make box-shadow for each table cell using :before pseudo element. It works perfect in all browsers except firefox.
CSS
table {
border-collapse: collapse;
}
.box2 .c-table {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
border-left: 1px solid #e5e3d5;
border-top: 1px solid #e5e3d5;
border-bottom: 1px solid #ebe8da;
border-right: 1px solid #ebe8da;
}
.box .c-table {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
border-left: 1px solid #e0ded1;
border-top: 1px solid #e0ded1;
border-bottom: 1px solid #e6e4d6;
border-right: 1px solid #e6e4d6;
}
.inbox .c-table {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
border-left: 1px solid #e0ded1;
border-top: 1px solid #e0ded1;
border-bottom: 1px solid #e6e4d6;
border-right: 1px solid #e6e4d6;
}
.c-table tr > td {
position: relative;
padding: 5px;
}
.c-table tr + tr {
border-top: 1px solid #f0eee0;
}
.c-table td + td {
border-left: 1px solid #f0eee0;
}
.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,0.15);
-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.15);
box-shadow: inset 0 0 4px rgba(0,0,0,0.15);
}
.inbox {
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #444444;
padding: 5px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
background-color: #d3d2c5;
border: 1px solid #f0eee0;
text-shadow: -1px -1px rgba(240,238,224,1), 1px 1px rgba(240,238,224,1);
-moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.15);
-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.15);
box-shadow: inset 0 0 4px rgba(0,0,0,0.15);
}
.box2 .inbox {
border-left: 1px solid #e5e3d5;
border-top: 1px solid #e5e3d5;
border-bottom: 1px solid #ebe8da;
border-right: 1px solid #ebe8da;
}
HTML
<div class="inbox margin-space">
<table class="c-table ">
<tbody>
<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>
</tbody>
</table>
</div>
I want to use pseudo for .c-table td because it makes a visual diffrence. ( visible in chrome )
http://fiddle.jshell.net/UXeBj/10/
Temporary solution
#-moz-document url-prefix() {
.c-table td:before {
content: none;
}
.c-table td {
box-shadow: inset 0 0 4px rgba(0,0,0,0.15);
}
}

Answer 1

apparently this bug report causes the same issue:
https://bugzilla.mozilla.org/show_bug.cgi?id=63895