サイト制作に関するメモ書き

HOME > スマートフォン > Androidの一部端末でborder-radiusにパーセント指定が効かない

Androidの一部端末でborder-radiusにパーセント指定が効かない

Androidでborder-radiusにパーセント指定が効かない不具合に遭遇したのでメモ。
確認したのはAndroid2.3のブラウザです。

サンプルコード

border-radius: 50%;を指定して円形にしたところ、Androidで角丸が効いていませんでした。

HTML

<div class="box"></div>

CSS

.box {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: #E74C3C;
}

対応前のデモページ
 

パーセント指定ではなくpxで指定することで、とりあえずは対応できました。

CSS

.box {
	width: 100px;
	height: 100px;
	border-radius: 50px;
	background: #E74C3C;
}

対応後のデモページ
 

Android2.3でのバグかと思ったのですが、調べてみると一部端末で適用されないようです。

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP