Archive for the 'css' Category

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


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

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

  1. IEでもCSS3 その1(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 */

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