webkit系ブラウザで気を付けたいCSS3での角丸 | スマートフォンサイト作成 ノウハウ集webkit系のブラウザには、chrome、safariのほか、Androidの標準ブラウザやiOSのSafariもwebkitを利用しています。 そこで、問題があります。それは、角丸にしているにも関わらず、中に表示しているものが角丸を超えて表示される問題です。 以下の条件を満たす場合に発生します。 ・overflow:hiddenではみ出た場所を隠す。 ・border-radiusで角丸にする。 ・position:relativeで、内部タグを位置指定にする。 overflowとborder-radiusだけであれば問題ないようですが、positionを利用した途端、角丸を超えて描画が行われます。 対処方法は、中に描画するものにも角丸を付けるといったことぐらいです。 【参考サイト】 border-radiusとoverflow:hiddenをしたときの各ブラウザの挙動の違い
