- ベストアンサー
WinIEでddタグをCSSで制御するとずれてしまう
- WinIEでddタグをCSSで制御すると、「取締役/」と書かれた文字から先が前にずれる現象が発生します。
- 問題の解決策として、特定のクラスを追加してCSSを修正する方法があります。
- 他のシンプルな解決策を模索することもできます。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
・前回の回答ですが、長さが指定できるなら長さの方がシンプルになります。（高さの指定はなくても大丈夫） ・dl の compactって対応してないブラウザが結構あります。 NN6以降(他gecko使用ブラウザ)とか、Operaとか。safariとかMac系はよく知らないけど。 HTML4.01ではDeprecatedに指定されてるし、compact属性の将来は暗いかも。 （でも、スタイルシートのdisplay:compactに対応するようになったらちゃっかりcompact属性にも対応するかも。） ・見ようによっちゃ、表にもみえるしtableでもいいのかも。
その他の回答 (3)
- quads
- ベストアンサー率35% (90/257)
どうやらcompact属性を考慮されずにfloatを利用されているようなので…。 本来、あなたが望む表示をする場合は以下のソースになります。 <html><head><title>dl組</title> <style type="text/css"> <!-- #works dl, dt, dd {font-size: 12px; line-height: 1.5em; margin: 0px; padding: 0px;} #works dt {padding: 0 0 5px 0;} #works dd {margin: 0 0 0 5.5em; padding: 0 0 5px 0;} --> </style> </head> <body> <div id="works"> <dl compact> <dt>会社創業</dt> <dd>昭和63年2月1日</dd> <dt>改組設立</dt> <dd>平成15年3月1日</dd> <dt>役員</dt> <dd>代表取締役社長/あいうえお<br> 常務取締役/かきくけこ<br> 取締役/さしすせそ<br> 取締役/たちつてと<br> 取締役/なにぬねの<br> 取締役/はひふへほ</dd> </dl> </div> </body></html> 特に理由が無い限り、これでいいと思います。 ※displayプロパティ値に compact は存在しません。
お礼
お返事ありがとうございます。 出来ました！ありがとうございます。 ちなみに<dl compact>というのはCSSでは記述できないのでしょうか？ ご存知でしたら教えて下さい。 それと「display: compact;」ですが、あるみたいですよ。 ほとんど対応していないようですが…。 http://www.w3.org/TR/REC-CSS2/visuren.html#compact http://www.zspc.com/documents/css2/display/display.html
- steel_gray
- ベストアンサー率66% (1052/1578)
<dd>に長さを指定できる状況なら長さを指定し明示することで回避できるようです。（参考URL） ただ、あくまでバグの回避なので今行っているようなわかりやすい対処でもかまわないような気もします。 # 本当なら<br>で改行している部分は個別に<dd>でマークアップするべきなんだけど、そうするとやっぱり段ずれの回避が出来ない…IE憎し。
お礼
お返事ありがとうございます。 早速試してみました。 #works dd { margin: 0 0 0 5.5em; padding: 0 0 5px 0; height: auto !important; /*モダン(?)ブラウザ用設定*/ height /**/:0px; /*IE5.x用設定*/ } WinIEでは「height: 0px」といれても大丈夫でしたが、 WinIE以外ではおかしくなってしまう場合が多かったので「height: auto」にしました。 WinIE5.xでは「height: auto」では、前にずれてしまいました。 「!important」を使った場合、WinIE6も含まれてしまいますが、WinIE6のみは「height: auto」でも大丈夫でした。 先ほどの「html>body」より記述を短くする事が出来ました。 ありがとうございました。
- quads
- ベストアンサー率35% (90/257)
あんまり詳しくないので、floatさせると3行目以降がずれる直接の原因は説明できませんが…。 ■float:left を削除。 ■<dl>タグにcompact属性を挿入。 で解決です。 というか、そういう表示のための属性です。
補足
お返事ありがとうございます。 早速試してみましたが、解決できませんでした。 下記で合ってますでしょうか…。 #works dl { display: compact; } #works dt { padding: 0 0 5px 0; }
お礼
お返事ありがとうございます。 >dl の compactって対応してないブラウザが結構あります。 確認したつもりでしたが…、ホントでした。 結構どころかWinIE以外は、知っている限り試しましたがダメですね。 MacIE5.xもダメです。 >長さが指定できるなら長さの方がシンプルになります。 そうですね。「width: 100%;」なら支障はないようですのでそうします。 ありがとうございました。
補足
「display: compact;」ですが、dl ではなく dt に付けた場合、Opera(6と7で確認)でうまくいきました。 ならば<dt compact>でOperaでもいけるのかと試しましたが、ダメでした。