• RSS

[CSS]角丸をIE8以下でも利用できるようになる「border-radius.htc」の使い方と注意点

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

IE8以下のバージョンで「角丸」を実現させる方法は、PIE.htcIE-CSS3.htc などを使う方法もありますが、今回紹介させていただく border-radius.htc を使う方法もあります。

名前の通り border-radius のプロパティに特化した HTCファイルです。

border-radius.htc のダウンロード

以下のページより border-radius.htc のファイルをダウンロードします。


border-radius.htc の使い方

PIE.htc などと同様、IEのビヘイビア 機能を利用して HTC ファイルをHTML 上で使用できるようにします。
.box    {
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
     
    /*PIE.htc を利用*/
	behavior:url("./border-radius.htc");
}


border-radius.htc のサンプル

以下のページに、border-radius.htc を利用した「角丸」のサンプルを掲載しています。
border-radius.htc のデモ


border-radius.htc の注意点

全体のデザインにも依りますが、結論から申し上げてあまり使いモノになりません > <;

#wrap とか #wraper に 背景色を指定したら動かない

border-radius.htc ですが、ページ全体を包んでいる #wrap とか #wraper などの要素に背景色(background:#fff など)が指定されていると、何故か正常に角丸が表示されません。


position:relative を書くと動かなくなる??

PIE.htc を利用する際に、HTCファイルが動いてくれない時は要素に position:relative を書けば動くかも?!?! と紹介しましたが、border-radius.htc の場合は position:relative を書くと逆に動かなくなるかも?!?!


四隅に半径を個別に指定できない

以下のように、5px 10px 20px 30px と四隅に半径を個別に指定しても反映されません。
.box	{
	-moz-border-radius:5px 10px 20px 30px;
	-webkit-border-radius:5px 10px 20px 30px;
	border-radius:5px 10px 20px 30px;

	behavior:url(./border-radius.htc);
}
なぜか最初の1辺(左上の半径)が優先され、その値が四辺全てに適用されるようです。



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください