※ ChatGPTを利用し、要約された質問です(原文:WinIE(5以降)で、ddタグをCSSで制御すると、ずれてしまいます。)
WinIEでddタグをCSSで制御するとずれてしまう
WinIE(5以降)で、ddタグをCSSで制御すると、ずれてしまいます。
WinIE(5以降)で、ddを下記のCSSで制御すると、「取締役/」と書かれた文字から先が、
前に3pxほどずれてしまいます。
----------------------------------------------------
<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; float: left;}
#works dd {margin: 0 0 0 5.5em; padding: 0 0 5px 0;}
-->
</style>
</head>
<body>
<div id="works">
<dl>
<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>
----------------------------------------------------
そこで下記のCSSを追加して、いちよう解決したのですが、何かすっきりしません。
----------------------------------------------------
#works dd .sage {padding: 0 0 0 3px;} /* WinIE用 */
html>body #works dd .sage {padding: 0;} /* WinIE以外用 */
<!-- ここから -->
<div class="sage">取締役/さしすせそ<br>
取締役/たちつてと<br>
取締役/なにぬねの<br>
取締役/はひふへほ</div></dd>
<!-- ここまで -->
----------------------------------------------------
これ以外の方法で、もうちょっとシンプルに解決する方法はないでしょうか。
よろしくお願いします。
お礼
お返事ありがとうございます。 >dl の compactって対応してないブラウザが結構あります。 確認したつもりでしたが…、ホントでした。 結構どころかWinIE以外は、知っている限り試しましたがダメですね。 MacIE5.xもダメです。 >長さが指定できるなら長さの方がシンプルになります。 そうですね。「width: 100%;」なら支障はないようですのでそうします。 ありがとうございました。
補足
「display: compact;」ですが、dl ではなく dt に付けた場合、Opera(6と7で確認)でうまくいきました。 ならば<dt compact>でOperaでもいけるのかと試しましたが、ダメでした。