H 5:border-radiusモバイル端末の互換性の問題

質問シーン
円形の枠線のオプション値を次のように実現します.

.option {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    font-size: 36px;
    color: #888888;
    border: 2px solid #888888;
}

chromeや他のブラウザで正常に表示されます.個別の移動端機では、円が丸くなく、文字が中央に合わない場合があります.
 
の原因となる
モバイル側の一部のマシンはborder-radiusパーセンテージサポート属性に互換性の問題がある.
 
ソリューション
パーセンテージを使用せずに固定値を使用し、接頭辞-webkit-、-moz-を追加します.

.option {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    text-align: center;
    line-height: 40px;
    font-size: 36px;
    color: #888888;
    border: 2px solid #888888;
}

しんそく有効