html - リストとして (HTML) DL DT DD を使用した Windows と Mac OS X の違い

Question

私はこのコードを持っています: http://jsfiddle.net/mbekX/

Chrome、Opera、IE8、および FF を搭載した Windows では、すべて正常に動作します。

X TEXT
X TEXT
X TEXT

しかし、OSX で Safari と FF を使用すると、次のようになります。

X TEXT
  X TEXT
    X TEXT

ここで誰か助けてくれませんか？

高さを修正したset ddを使用してOSXで修正できますが、ddタグにも複数行があります。したがって、これは不可能です。

OSX-IMAGE を追加: http://i.imgur.com/2lgaJ.png Windows では、すべての緑色の四角形がすぐ下にあります。

Answer 1

line-heightonddとdtelements を要素の と同じに設定しheightますdt。

フィドル

Answer 2

一部の空<dt>の要素の高さと幅を、配置しようとしている「行」よりも大きい特定のサイズに設定しています。それを組み合わせると、float:leftここに表示される効果が得られます。基本的に、行の高さは、これらのdt要素を設定した16pxの高さよりも低くなります。dt要素がずれなくなるまでのline-heightを増やすことができます。少なくとも<dl>お勧めします。line-height: 1.5;ただし、各要素にコンテンツがあり、<dt>要素のように高さを設定しない場合、この問題は自然に解決します<dt>X</dt>。そして、定義リスト（）に<dd>定義用語（）がなければ、定義データ（ ）はありませんよね？<dt><dl>