HTML、CSS、Javascript、デザイン、絵を描いたり。 このページの先頭へ戻る
![IE6 dl,dt,ddの擬似テーブルで3pxのずれを直す方法 - develo.org](https://cdn-ak-scissors.b.st-hatena.com/image/square/fd0dbd2b439f50b0a8cc90f9907f73a0d8c341e6/height=288;version=1;width=512/http%3A%2F%2Fdevelo.org%2Fimg%2Fog.gif)
HTML、CSS、Javascript、デザイン、絵を描いたり。 このページの先頭へ戻る
dtをfloatする場合の注意点 2008-05-12 0 0 XHTML/CSS CSS, dl, float dl の定義リストで,dt を float させることがよくあります。このとき注意したい点をまとめておきます。 新着情報のようなところで,更新日を dt で,更新内容を dd でマークアップした場合を想定してみましょう。 まず,XHTMLでのマークアップは次のような感じです。 <dl class="recent"> <dt>2008-05-12</dt> <dd>ページ5を更新しました。テキストテキストテキスト。</dd> <dt>2008-05-10</dt> <dd>ページ4を更新しました。テキストテキストテキスト。</dd> <dt>2008-05-07</dt> <dd>ページ3を更新しました。テキストテキストテキスト...。</dd> <dt>2008-05-06</
定義リストで、dtとddを横並びにしたいとき、ddのマージンの調整でそれを実現するやり方は私がよく使うテクニックなのだが、あるとき、IE7で見たらdtがすっかり消えていて、あわてたことがある。原因は、またしても、その定義リストを含むボックスへの背景画像の指定だった。 [該当するブラウザ] Windows/IE7.0以下 症状 たとえば、年表のようなリストを角マルの矩形で囲むレイアウトを組んだとする(右図)。 角マル矩形は、 frame_top.gif(トップの部分)、 frame_bg.gif(中間部分)、 frame_btm.gif(ボトムの部分)、 以上3つの画像を、dlおよびdlを含むボックスに背景として指定することで実現している。詳細は以下の通りである(→サンプルページ1)。 【スタイルシート】 body { margin: 10px; padding: 0; } .box { w
こんばんわ、おひさしぶりです。 溝上です。 なんだかひさしぶりにブログを書く気がします。 そんなわけで今回は軽くリハビリがてら、 最近遭遇したIEのバグについてお話したいと思います。 それでは早速サンプルをご覧ください。 (htmlコーディング) <ol class="number"> <li>あいうえお</li> <li>かきくけこ</li> <li>さしすせそ</li> <li>たちつてと</li> </ol> <ol class="alphabet"> <li>あいうえお</li> <li>かきくけこ</li> <li>さしすせそ</li> <li>たちつてと</li> </ol> (cssサンプル) li{ zoom:1; } ol { margin-left:30px; } .number li { list-style-type:decimal; } .alphabet li
XHTML+CSSでコーディングするときにブラウザのバグを知っているか知らないかでは大きく違いますよね。とりわけ他のブラウザよりバグが多いIE6さんのバグをまとめてみることにしました。そろそろIE7の自動配布が始まるころなので忘れないうちにということで。 とは言ったもののIE6のバグを改めて見てみると多い・・・多すぎるよ!逆にこれだけのブラウザがあるからこそコーダーという職種がある気さえしてきます。 今回は『CSSバグ辞典スレッド』の要約のWinIE CSSバグリストからIE6のバグを抜き出して自分でわかりやすいように種類わけしてみました。これで全てではないですがこれだけ知ってればかなりのケースで対応できると思います。 2012/07/31 追記: リンク先がなくなったのでリンクを外して一覧だけ残しときます。 ちなみにこの種類分けも厳密ではないのであしからず。 ボックスモデル maring
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く