スタイルシートをめぐる冒険: dlを含むボックスに背景画像を指定すると背景画像が繰り返される
この現象は、あるWebページで、※1～、※2～、※3～というような「脚注」にdlタグを使用したときに発生した。 本文と脚注を区切る罫線として、脚注を含むボックスの上部に、二重破線の背景画像（line.gif をx軸にリピート）を指定。ddにマイナスのmargin-topを指定して、dtとddが横に並ぶレイアウトにしたところ、一番上にだけ入るべき罫線が<dt></dt><dd></dd>のセットごとに入ってしまったのである。 [該当するブラウザ] Windows／IE7.0（互換モードのとき）、IE6.0以下 症状 実際にどういうことか、右のスクリーンショットを見ていただこう。これは、IE7.0で表示させたときのものである。 そして、スタイルシートとHTMLは以下のように記述されている。（→サンプルページ1） 【スタイルシート】 body { line-height: 1.5em; } .b
スタイルシートをめぐる冒険: inline-blockの奇妙な世界
inline-blockとは、displayプロパティの値のひとつで、表示形式を「インラインに流し込むことのできるブロック要素」にするためのもの。まともに対応しているのが、OperaとSafari、それになぜかMac版IEくらいというマイナーな存在だが、なかなか興味深い振る舞いをする値なので、いろいろと検証してみた。 まず、「インラインに流し込むことのできるブロック要素」とはどういうものなのかを見てみるために、.inlineblockというクラスを作り、div要素に指定してみた。また、「インラインに流し込むことのできるブロック要素」とは、言い換えれば、「幅と高さを指定できるインライン要素」ということだから、span要素にも指定した。 インラインブロックの検証 その1 【スタイルシート】 .inlineblock { display: inline-block; width: 100px;
スタイルシートをめぐる冒険: CSS実験室: clearfixの決定版を作る ―モダンブラウザ編―
floatに起因するレイアウトくずれの多くは、floatをしかるべき場所でクリアすることによって解決する。このことを発見して以来、もっぱら空ボックスにclearを指定するという方法（<div style="clear: both"></div>）を多用してきたが、HTMLにある種の不純物が混じることに居心地の悪さはずっと感じていた（「floatを繰り返すとレイアウトがくずれる」参照）。この気持ち悪さを解消してくれるのが、clearfixというテクニックだ。 基本的な発想は上記の空ボックスによるクリアと同じだが、それをHTMLには一切手を加えず、スタイルシートだけで実現しているところに大きな特徴がある。しかし、ひとくちにclearfixといっても様々なバリエーションがあり、その記述のしかたは微妙に異なる。 例えば、clearfixの提唱者ではないかと類推されるPosition Is Ever
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
