WordPressで角丸

リニューアルで角丸を使ってみたワケだけど
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(https://サイトパス/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なんて知らん。