webkit系ブラウザで気を付けたいCSS3での角丸 | スマートフォンサイト作成 ノウハウ集
webkit系のブラウザには、chrome、safariのほか、Androidの標準ブラウザやiOSのSafariもwebkitを利用しています。 そこで、問題があります。それは、角丸にしているにも関わらず、中に表示しているものが角丸を超えて表示される問題です。 以下の条件を満たす場合に発生します。 ・overflow:hiddenではみ出た場所を隠す。 ・border-radiusで角丸にする。 ・position:relativeで、内部タグを位置指定にする。 overflowとborder-radiusだけであれば問題ないようですが、positionを利用した途端、角丸を超えて描画が行われます。 対処方法は、中に描画するものにも角丸を付けるといったことぐらいです。 【参考サイト】 border-radiusとoverflow:hiddenをしたときの各ブラウザの挙動の違い
border-radiusとoverflow:hiddenをしたときの各ブラウザの挙動の違い - Toro_Unit
最新のブラウザだとベンダープレフィックス無しでborder-radiusが使えるようになりました。 そんなわけで仕事で使おうと思いましたが、ちょっとしたトラブルが。 border-radiusを掛けた要素にoverflow:hiddenを掛けたときの挙動が各ブラウザでちょっと違います。 そんなわけでそのまとめです。 とりあえずデモを用意したのでこれを見ながら解説です。 [css] .box1 { border-radius: 30px; border: 5px solid #999; overflow: hidden; } [/css] これでIE9,firefoxは問題なく内側の要素も丸く切り取られて表示されます。 しかし、chrome等のWebkit系、Operaではう内側の要素がborderに重なって表示されてしまいます。 Operaだと解決方を発見できなかったので、Operaもター
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
