WordPressで角丸

4月 5th, 2010

リニューアルで角丸を使ってみたワケだけど
IE以外はCSSで簡単に実現出来る。

こんな具合

CSSに

.kadomaru{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

あとは角丸にしたいところに class=”kadomaru” これでOK。
※borderなど枠線はお気に召すままに。

しかしIEは丸くなってくれない。
解決策としてborder-radius.htcなるものが配布されているので
使ってみた…

Curved corner (border-radius) cross browser | HTML Remix

ダウンロードしたborder-radius.htcをサイト内適当なところにアップして

.kadomaru{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

behavior: url(border-radius.htc);

}

太字の1行を追加するだけ。WPの設定によっては絶対パスに。


behavior: url(http://サイトパス/border-radius.htc);

がしかし、これを割り当てた部分がIEでは親要素より下側に行って、
角丸指定した要素が隠れてしまった。
z-indexで親要素を階層指定してもうまくいかない。

仕方がないので、親要素に角丸指定しないで
border-radius.htcを割り当ててみたらうまく行った。

.kadomaru_oya{
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius:0px;
behavior: url(border-radius.htc);
}

これを親に割り当てて解決した。(これでいいのか?

border-radius.htcにz-indexの記述があるが
色々いじってみても解決しなかった。

原因追及も疲れるし何となく解決してるし良しとしよう。
もういいんだIEなんて知らん。

Related Posts

2 Comments

  • Prince

    4月 th, 2010 10:46 PM

    お久しぶりです、かむ先生。新しいブログのデザイン素敵です。
    自分もIEには悩まされてばかりですが、先生の「IEなんて知らん」で少し安心しましたw

  • かむ

    4月 th, 2010 2:46 PM

    おお!プリンス元気でやっとるかいの?
    気分的にはIEは絶滅してほしいんだけどそうも行かないのでねぇ