Web Coding


Warning: Use of undefined constant   - assumed ' ' (this will throw an Error in a future version of PHP) in /home/wanwan888/www/wordpress01/wp-content/themes/w-note1102/single.php on line 25

2011年02月11日

CSS3の角丸やシャドーをieでも

ieブラウザで、角丸・シャドーなどのプロパティを有効にさせるために
ie-css3.htcファイルを使っていたのですが、 
角丸のボックスの中に角丸のボックスを入れると、
つまり2重、3重に角丸のボックスを使うと、
内側のボックスの角が丸くならない(ieで)という現象に遭遇しました。

解決策は、角丸ブロックのスタイルの中に

position:relative;
z-index:1;

を加えるとよいのだそうで、これでちゃんと表示できるようになりました。
きょうもネット上の先輩方の情報に感謝。

CSS3 : 角丸とシャドーのie対応コードサンプル

1)ie-css3.htcをダウンロードして、フォルダに入れておく。

2-a)角丸のコードサンプル

/* 10ピクセルの角丸 */
.corner_r10 {
background: #ffffff; /* IE用に背景は必須 */
-webkit-border-radius: 10px; /* Safari,Chrome */
-moz-border-radius: 10px;/* Firefox */
border-radius: 10px; /* Opera 10.5+, Internet Explorer 6+ using IE-CSS3 */
position:relative;
z-index:1;
behavior: url(ie-css3.htc);
}

2-b)ボックスシャドーのコードサンプル

/* 色d9d9d9、右に1px、下に2px、ぼかし3pxのシャドー */
.shadow3 {
background: #fff; /* IE用に背景は必須 */
-moz-box-shadow: #d9d9d9 1px 2px 3px; /* Firefox */
-webkit-box-shadow: #e6e6e6 1px 2px 3px; /* safari, Chrome */
moz-box-shadow: #e6e6e6 1px 2px 3px; /* Opera 10.5+, Internet Explorer 6+ using IE-CSS3 */
position:relative;
z-index:1;
behavior: url(ie-css3.htc);
}

ただし、こんな現象も…

・サーバによっては相対パスでは認識されない
・背景画像のno-repeatが効かなくなる
・ウィンドウサイズをリサイズすると要素のズレが生じる
などがレポートされていて、私も上記の2つを体験しました。

ちなみにこのブログでは、no-repeatが効かないことで
デザインが大変なことになってしまったので、
このスクリプト(ie-css3.htc)を使うのをやめました。
よって、IEで見ると角が直角で、
他のブラウザだと角丸で見られます。(笑)

今回参照させていただいた記事はこちら

ie-css3のバグレポート

W-Note http://wanwan.jpn.org/