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

解決済

質問者：mic_goto
質問日時：2013/05/03 14:28
回答数：2件

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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： DrFell
回答日時：2013/05/03 17:50

問題のある個所を１つずつ検証されてはいかがでしょうか？

【例】
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へのシャドウは不要になります。