box-shadowでFirefoxだと内枠に影が

質問

box-shadowがFirefoxだと内枠にも付いてしまいます（バージョン20）。
内枠には付けたくないのですが、どうすればよろしいでしょうか？

添付画像のようになってしまいます。
IE10だと内枠には付きません。
このような形にしたいです。

コードを下記します。

<table>
<tr><th>ID</th><th>名前</th><th>得点</th></tr>
<tr><td>1</td><td>ほげ男</td><td>100</td></tr>
<tr><td>2</td><td>ほげ子</td><td>11</td></tr>
</table>
<style type="text/css">
table{
border-spacing:0;
font-family:"メイリオ";
}
table th{
padding:8px 0;
border-top:1px solid #aaa;
border-left:1px solid #aaa;
border-bottom:1px solid #aaa;
text-shadow:0 -1px 0 rgba(255,255,255,0.9);
box-shadow:-1px 0 1px rgba(255,255,255,1)inset,0 -1px 1px rgba(255,255,255,0.5)inset;
background:#eee;
background:linear-gradient(#eee,#ddd 50%);
width:134px;
}
table th:first-child{
border-radius:5px 0 0 0;
}
table th:last-child{
border-radius:0 5px 0 0;
border-right:1px solid #aaa;
box-shadow:2px 2px 1px rgba(0,0,0,0.1),0 -1px 1px rgba(255,255,255,0.5)inset,-1px 0 1px rgba(255,255,255,1)inset;
}
table td{
padding:8px 0;
text-align:center;
border-left:1px solid #aaa;
border-bottom:1px solid #aaa;
}
table td:last-child{
border-right:1px solid #aaa;
box-shadow:2px 2px 1px rgba(0,0,0,0.1);
}
table tr{
background:#fff;
}
table tr:last-child td{
box-shadow:2px 2px 1px rgba(0,0,0,0.1);
}
table tr:last-child td:first-child{
border-radius:0 0 0 5px;
}
table tr:last-child td:last-child{
border-radius:0 0 5px 0;
}
</style>

回答No.2

DrFell · ベストアンサー

問題のある個所を１つずつ検証されてはいかがでしょうか？
【例】
table th:last-child{
border-radius:0 5px 0 0;
border-right:1px solid #aaa;
box-shadow:2px 0/*★2pxっておかしくない？*/ 1px rgba(0,0,0,0.1),0 -1px 1px rgba(255,255,255,0.5)inset,-1px 0 1px rgba(255,255,255,1)inset;
}

私なら、
table{
margin-bottom:2em;
border-spacing:0;
font-family:"メイリオ";
border-radius:5px;
box-shadow:2px 2px 1px rgba(0,0,0,0.1)}
などとしておいて、tdやｔｈの影の負担を減らします。少なくともtdへのシャドウは不要になります。

お礼

ありがとうございます！

回答No.1

mic-goto

質問者です。
質問時の添付画像が粗いので、以下にアップし直しました。

http://uploda.cc/img/img51834c2049ead.jpg

参考URL：

http://uploda.cc/img/img51834c2049ead.jpg