複数のタグの中にあるブロック要素のタグを角丸にする場合、角丸が効かない場合があります。
例）
<div class="box_outer">
<div class="box">
PIEではIEでも<br />
角丸・ドロップシャドウ・グラデーションを<br />
実行できます。
</div>
</div>
この要素の各スタイルは以下の通り
.box_outer{
padding:20px;
background-color:#FFF;
}
.box {
padding:20px;
background-color:#EEE;
border:solid 1px #000;
/*角丸*/
-moz-border-radius: 15px; /*FireFox*/
-webkit-border-radius: 15px; /* Safari and Chrome */
border-radius: 15px; /* Opera 10.5+, IE */
behavior: url(PIE.htc);
}
これを実行すると、以下のようになります。
サンプルをFireFoxなどで見ていただければわかると思いますが、白い部分の中に灰色の角丸ブロックが表示されます。
しかしIEでみると角丸にならないどころか、background-colorの設定が無効になってしまっています。
どうやら外のタグでbackground-colorを設定するとこのようにバグるようです。（他にも原因なるかもしれませんが）
解決方法としては、角丸にするタグのスタイルで「position:relative;」を設定してください。
.box_outer{
padding:20px;
background-color:#FFF;
}
.box {
padding:20px;
background-color:#EEE;
border:solid 1px #000;
position:relative;
/*角丸*/
-moz-border-radius: 15px; /*FireFox*/
-webkit-border-radius: 15px; /* Safari and Chrome */
border-radius: 15px; /* Opera 10.5+, IE */
behavior: url(PIE.htc);
}
これでとりあえず解決するようです。