PIE.htcで角丸などがうまく表示されない場合の対処法(メモ)

IE8以下などに角丸などのCSS3を利用できるようにするPIE.htc。

便利なのですが、いろいろと不具合といいますか、動作を不安定にさせる部分が多いようで安定感はあまり感じません。

今回は他のサイトさんなどで見られる情報以外で「これが原因かな？」と思えるものがありましたので、メモとして残します。同様の方法で治る方が多いようであれば、対処法としてそれなりに有効なのかもしれません。

PIE.htcについて

PIE.htcですが、説明は省略します。以前のPIE.htcの記事にすこしだけ説明を書いていますので、そちらをご覧下さい。

今回の状況

今回の状況を箇条書きで記します。

• 角丸を使いたい
• 背景画像あり

続いて、うまくいかない状況を同じく箇条書きで。なお、確認はIEの開発者ツールにあるエミュレート機能を用い、IE7とIE8で見ています。

• 表示した段階では該当部分にすべてのcssが効いていない
• マウスを該当部分に乗せると角丸以外が適用される
• 表示した瞬間に一瞬角丸がちらつくことがあるがすぐに消える

マウスオーバーで表示が変わる理由がよくわかりませんが、エミュレート+IE下位では何が起きても不思議ではない(暴言）ので、そういうものなのかなと。後述する方法でこの部分のおかしな動作は消えましたので、最終的には問題のない状態に仕上がっていると思われます。

更に続いて、行った対処を。

• 該当部分やその周辺に「position:relative;」を設定

「position:relative;」

「position:relative;」ですが、これはどこのサイトでもよく書かれていることです。厳密に言えば理由を理解できていないのですが、だいたいこんな感じかなと思っています。

PIE.htcで角丸を使うと、該当要素の上に絶対配置で角丸に加工された画像が置かれるようです。つまり、要素を角丸にしているのではなく、角丸にした画像を上に載せているということです。

「position:relative;」は要素の配置基準に影響しますから、これがないと絶対配置で画像を置く時に基準が見つからずに困る、ということだと思います。

「position:relative;」でも治らない場合の一案

さて、「position:relative;」でも今回は治りませんでした。いろいろやっていて、うまくできたのが以下の方法です。

• 要素をcssのセレクタで追い込むのではなく、要素にid(classでも可)を付けて指定する

単純な話なのですが、DOM（Document Object Model）要素を何かしら利用する場合、その要素を特定するためにidを使うのが基本かと思いますので、cssによる指定をそういった形にすれば安定するという感じでしょうか。

具体的にいえば、

#wrap #main-contents .post p:first-child {
webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
behavior: url("/PIE.htc");
position:relative;
}

ではなく、

p#top-parts {
webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
behavior: url("/PIE.htc");
position:relative;
}

のようにidを付与した上で指定します。
隣接セレクタや疑似セレクタも使わない方が無難なようですね。

結び

仮説に基づき、かつ、大した内容ではありませんが、念のためメモとして。