ダリの雑記：WEBプログラム版

この記事は1年以上前の記事のため、内容が古い可能性があります。

複数のタグの中にあるブロック要素のタグを角丸にする場合、角丸が効かない場合があります。

例）

<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);
}

これでとりあえず解決するようです。

サンプル