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でのバグかと思ったのですが、調べてみると一部端末で適用されないようです。

【参考サイト】

 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

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

コメントが承認されるまで時間がかかります。

2021年4月
 123
45678910
11121314151617
18192021222324
252627282930