css - テーブル上の Safari ボーダー半径クリッピング

Question

親要素に単色の境界線を持つ境界半径がある状況があります。これは、Safari (5.1.7) を除くすべてのブラウザーで期待どおりに機能します。Safari では、子要素の背景色が境界線ににじみ出ており、background-clip が役に立っていないようです。他の人が同様の問題を解決しているのを見たことがありますが、これは特にテーブルに関する問題ですか? クリッピングが適切に適用されない理由について何か考えはありますか?

http://jsfiddle.net/q3NF9/2/

Answer 1

次の CSS を追加してみてください。

thead th:first-child {
   border-top-left-radius: 15px;
}
thead th:last-child {
   border-top-right-radius: 15px;
}

例を参照してください: http://jsfiddle.net/q3NF9/8/