以前エントリーした記事、IE8とIE7はメイリオ、IE6/FFはMS Pゴシック、Mac Safari/FFはヒラギノ角ゴを表示から早くも3年近く経っている事にびっくりしました。ブラウザに関する事情は大きく変わってIEの最新版は9で現役のIEは6〜9（IE6を排除するサイトもだいぶ増えましたが）加えてChromeのシェア上昇、Safariは5に、Firefoxに至っては12！でブラウザが乱立する状態になっています。
これだけブラウザの進化が早いと出来る限りハックは使わず...と言うのが安全策だと思います。
どうしても使う場合は極力シンプルに！と言う事で以前はセレクタハックを使っていたのですが、プロパティに記述するハックに切り替えてます。
※基本bodyに指定するフォント関連でのみ使用し、他の場所では極力ハックは使わないようにしています。決してハックを推奨する記事ではありません。
過去に2回ほどCSSでdlのdt ddを横並びにする記事をこのブログにポストしました。
過去の記事は2つともfloatを利用しましたが、ネガティブマージンを使った方がCSSコードもシンプルになるのでおススメです。
まずdl要素のline-heightプロパティで行の高さを指定します。dd要素のmargin-topプロパティにdl要素で指定したline-heightプロパティと同じ値のネガティブマージンを与えればOKです。
Firefox3.6のベータ版でCSS3のグラデーションが使えるようになりました。グラデーションには線形と円形がありますが、今回は線形のみを試して見ることにしました。
当ブログの過去のエントリーborder-collapseの内容は2006年当時の内容であるため、検証したブラウザが少々古い物となっています。
なので自分の環境で出来る限りのキャプチャーを取ってみました。検証したブラウザは以下の通りです。クリックするとキャプチャー画像をご覧になれます（画像は2倍に拡大してあります）。
結果はWindows Internet Explorer6,7,8は内側に表示、Firefox2,3,3.5はWindows,Macintoshともに左に1pxは見出す、Safari4はWindows,Macintoshともに内側に表示、Google Chrome,Opera9.6はともに内側に表示されました。
統合ボーダーモデルとはborder-collapseプロパティの値にcollapseを指定した場合を指します。separeteを指定した場合はこのずれは生じません。
CSSでフッターを下部に固定する方法ですが、おそらく有名なのはCSSStickyFooterでしょう。コンテンツ部分のpadding-bottomにフッターのheightを指定してフッターのmargin-topにheight分のネガティブマージンを指定するという物です。
CSSStickyで紹介されている(X)HTMLとCSSだと全体を包むdivがありません。よくあるサイトのデザインとして全体を包んだdivの左右にドロップシャドウをつけた画像を縦軸にリーピートさせるものがあります。今回は このCSSStickyFooterを少々改造して全体を包むコンテナを含んだワイヤーフレームに対応させてみました。
