これは私の問題です: 私は親の div を丸みを帯びた角を使用して丸くしたいのですが、その要素の子 (色付きの背景を持つ) を正方形のままにしたいのですが、正方形の角が外側を指すようにしたくありません。丸い親。これは、ほとんどのブラウザーで修正するのはそれほど難しくありません。overflow:hidden を親とviolaに追加するだけです。しかし、Safari ではこの修正は機能しません。子の四角い角が丸い親の外を向いています。私の質問は、Safari で親の角を丸くして子に影響を与える方法はありますか?
明らかな回避策が 2 つありますが、この場合はいずれも適用されません。
- 子は親のスペース全体を埋める必要があるため、(ここで説明したように) 親にパディングを追加することはできません。
- 子はjavascriptによってサイズ変更され、ステータスインジケータとして使用されるため、角を丸くすることもできません。したがって、正方形にする必要があります。
ここに私のコードの jsFiddle があります: http://jsfiddle.net/henrikandersson/4Lnbt/
これは、Chrome (左) と Safari (右) での結果です。
更新: OS X と Windows の両方で Safari 5.1.7 を実行していますが、結果は同じです。