| ブログトップ | CSS関連 |

PIEバグレポート

この記事は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);
}

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

サンプル

日々の生活にhappyをプラスする|ハピタス

このエントリーをはてなブックマークに追加

LINEで送る

nandani | 2010年09月10日 | コメント(0) | トラックバック(1) | CSS関連

トラックバック

トラックバックURL

トラックバック一覧

[...] PIEバグレポートを追加しました。  [...]

コメントする

※メールアドレスが公開されることはありません。

名前 *
メール*
URL
Copyright(c) 2010 - 2017 ダリの雑記