IE6/7/8のブラウザでも角丸やドロップシャドウが使えるCSS3

,


今日の画像（←）は借り物。
金子さんというデザイナーさんのブログなんですけど、イラストのタッチが好きです。

さて、標記のこと。ie-css3.htcというのをインクルードすると、不出来だけど可愛い（否、可愛くない）IEでも CSS3が使えちゃうよという技です。詳しいことはリンク先をご参照あれ。（詳しい順、参考になった順です）

  1. IEでもCSS3　その１（ie-css3）
  2. IE6/7/8でもCSS3が使えるようになるスクリプト -IE-CSS3
  3. IE6/7/8のブラウザでも角丸やドロップシャドウが使えるCSS3

text-shadowが使いたかったので「CSS3 PIE」は検討外だったんですけど、角丸とかグラデーションはPIEの方がきれいみたいです。
　
ie-css.htc を使うときの注意点。

  • CSSに↓のように書くと、普通、CSSのあるフォルダのものを引っぱってくると思いますが、さうではありませんでした。ルートのを持ってくるみたいです。安全のため、フルパスで書いた方がいいです。 
    behavior: url(ie-css3.htc);
behavior: url('/wp-content/themes/hoge/style-vega/ie-css3.htc');
  • 『text-shadow: 1px 1px 2px #a0a0a0;』の指定の仕方にちょっと癖があります。シャドウの位置（XとY）はどれくらい離すかで、わかりやすいですが、ボケ具合のパラメータがちょっと難しいです。
/作成者:

floatを入れておく箱の高さ

　
いつも釈然としないまま、clear:both したり、border:1px solid #fff したりしてたんですけど、明確な解決法があったので、メモ。
　
ここ（⇒ float属性を指定した要素の親要素の高さ）に書いてありました。overflow:auto を指定するだけですって、奥さん！

<div style="overflow:auto">
  <div style="float:left">左側のなにか</div>
  <div style="float:right">右側のなにか</div>
</div>

　
これだけじゃ、なんなんで、display:none で隠しておいた要素を表示するとき、display:block じゃ表示されませんよと。display:inline ですよ。（なんの豆知識やねん！）

/作成者:

背景画像の位置

またまた、IE7互換表示だと OKで、IE8だと NGな CSSがあったので、メモ。
　
ここ（⇒ 背景画像の表示位置）によると、『CSS2.1においてbackground-positionプロパティにおいて、「キーワードを、長さや%値と組み合わせることはできません」という記述が削除されました。つまり、「top 25%」という記述も許可されます(ie8- -ff3 -o9 -sf4 -gc2未対応)。』ということですが、まだ未対応のようですね。IE7互換が先取りしてたってことで。

background-position:0 right;     /* NG */
background-position:0px right;  /* NG */
background-position:0% right;  /* NG */
background-position:top right;  /* OK */

　
あと、角丸ボックス・吹き出しのまとめ。ピタッとこないとなかなか使いにくいですが。

/作成者: