Css Firefox中未显示的每个表格单元格的框阴影
我需要使用:before伪元素为每个表单元格生成框阴影。它在除firefox之外的所有浏览器中都能完美运行 CSSCss Firefox中未显示的每个表格单元格的框阴影,css,Css,我需要使用:before伪元素为每个表单元格生成框阴影。它在除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
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>
显然,此错误报告导致了相同的问题:
您使用的是最新版本的Mozilla吗?尝试使用非固定版本的box shadow,请告诉我您发现了什么。他是对的,它在Mozilla Firefox上不起作用。我使用的是26.0版本的Firefox 4+支持box shadow,Firefox 3.5,3.6支持-moz box shadow,然后Firefox 3.0之前的任何版本都不支持box shadow。@MackoTarana我的链接有用吗?
@-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);
}
}