スタイルシート、JavaScript、DOM、ブラウザ判別、PHP 等ウェブ制作関連の各種情報
dlで、「定義（dt）→説明（dd）」を 1行にしたい事はよくありますね。テーブルレイアウトを避けたいと思えばなおさら。
- run-in
- 指定された要素を、後に続くブロックボックスの先頭にインラインで配置します。ただし、後に続くブロックボックスが回り込みの対象（float）であったり絶対配置されている場合は、ブロックボックスとして扱われます。
- compact
- 指定された要素を、後に続くブロックボックスの左マージン（後に続くブロックボックスの書字方向が「rtl」の場合は右マージン）内にインラインで配置します。ただし、指定された要素がマージン内に1行で収まりきらない場合や、後に続くブロックボックスが回り込みの対象（float）であったり絶対配置されている場合は、ブロックボックスとして扱われます。
上記引用文章は
run-in の定義部分が display: run-in、compact の定義部分が display: compact。
記：2003.02.28
CSS2 で追加されたプロパティです。対応状況チェック中。現実的にウインドウズIEが対応していないことには簡単に使えないですね。専用シートのカスケードで同様の効果を得るためには、run-in の場合は display:inline; に変更する、compact の場合は float:left; 、または position:absolute; を使うことでなんとかなりそうですが、頭がいたくなりそうなのでよっぽどヒマでないとやりません。
追記：2005.10.14
えー、ずっと気になってて Safari で上記の compact でマージン内にコンパクトボックスが作られない現象、どうやら他のサイトでも同じ症状がでてるようなので 1.3 のバグか、または「対応をやめた」かじゃないかと思われます。このサイト固有の他の要因かと思って普通の HTML でチェックしても同じでした。できれば Apple さんに対処願いたいと思います。
とはいえ、どうもこの display: compact は CSS2 より後に仕様書からなくなったというウワサです。あまりにも使われない（ブラウザが対応しない）からなのか他に理由があるのか、自分としては是非とも各ブラウザの実装を期待していたものなのでとても残念。
標準準拠を目指す Mozilla が全く対応の気配をみせないのでどうりで、って感じです。まぁただ、上記にちょっと書いたように、float を使いこなす事で同様の見栄えにはできるのでそういう代替え策があるから絞り込んで排除されてしまったということなのかもしれません。またどこかで情報見つけたら書きます。
| IE6.0 | IE5.5 | Opera7.5 |
|---|---|---|
| 非対応 | 非対応 | 対応 |
| Safari1.0 | IE5.2 | Netscape7.1 | Opera7.5 |
|---|---|---|---|
| 対応 | 非対応 | 非対応 | 対応 |
更新 2007-02-13 08:56 初回投稿 2004年10月28日 19:59
フリーのウェブサイトディレクター。音響オペレーター。北海道札幌にて活動中。
Web Site designed by Studio Susto