1

私はこのように見えるいくつかのhtmlを持っています：

<div style="{ display:inline; width: 80px}">fig</div>vitamin c<br>
<div style="{ display:inline; width: 80px}">apple</div>vitamin a<br>
<div style="{ display:inline; width: 80px}">coconut</div>vitamin <br>

IE.8では、これは次のように表示されます。

イチジクビタミン
リンゴのビタミン
ココナッツビタミン

そして、すべての「ビタミン」はうまく整列しています。Chromeではギャップが作成されないため、適切にレンダリングされません。

figvitamin
アップルビタミン
ココナッツビタミン

問題は、これはChromeの問題/バグですか、それともhtmlが正しくなく、ie8（この場合）が私の意図をより適切に推測しているためですか？

4

2 に答える 2

4

ChromeとFirefoxは正しいです。幅は、インライン要素の有効なスタイルプロパティではありません。いくつかのオプションがあります。

インラインブロック

あなたはこれを行うことができます：

<span>fig</span>vitamin<br>
<span>apple</span>vitamin<br>
<span>coconut</span>vitamin

と：

span { display: inline-block; width: 80px; }

<span>の代わりに使用したことに気付くでしょう<div>。これには理由があります。<span>sは当然であり、 Quirksmodedisplay: inlineによると：

IE 6および7ではinline-block、自然な要素でのみ機能します display: inline。

Firefox2以下はこの値をサポートしていません。を使用することはできます-moz-inline-boxが、と同じではないことに注意して inline-blockください。状況によっては、期待どおりに機能しない場合があります。

フロート

左側のラベルをフロートさせることができます。

<div>fig</div>vitamin<br>
<div>apple</div>vitamin<br>
<div>coconut</div>vitamin

と：

div { float: left; clear: left; width: 80px; }

の後のテキスト<div>が十分に大きい場合は、行の先頭に折り返されます（80pxバッファーではありません）。あなたはそれを望むかもしれないし、望まないかもしれません。

定義リスト

このマークアップの使用：

<dl>
  <dt>fig</dt><dd>vitamin</dd>
  <dt>apple</dt><dd>vitamin</dd>
  <dt>coconut</dt><dd>vitamin</dd>
</dl>

と：

dt { float: left; width: 80px; }

テーブル

<table>
<tbody>
<tr>
  <td class="left">fig</td>
  <td>vitamin</td>
</tr>
  <td>apple</td>
  <td>vitamin</td>
</tr>
  <td>coconut</td>
  <td>vitamin</td>
</tr>
</tbody>
</table>

と：

table { border-collapse: collapse; }
td.left { width: 80px; }

テーブルは、はるかに下位互換性のあるソリューション（IE5以前に戻る）であるため、適切ではないと主張する状況で引き続き使用されることがよくあります。いわゆるセマンティックWebの理想は、意図的であり、可能な場合は遵守する価値がありますが、「セマンティック純度」と下位互換性のどちらかを選択する状況になることも多いため、ある程度の実用主義が必要になります。勝つ。

そうは言っても、あなたが私たちに何かを言わない限り、あなたがしたくないのであれば、あなたはこの道を行く必要はないはずです。

最後に、常にDOCTYPE宣言をページに配置します。IEをクァークズモードから標準準拠モード（両方の婉曲表現）に強制します。例えば：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> 
<html>
...
于 2009-12-14T10:23:46.153 に答える
1

見出しには左に浮かぶdivを使用できます。これは、テーブルを使用したくないWebサイトや、テーブルで制限されている厳密なレイアウトよりも柔軟性が必要なWebサイトの2列形式などで人気があります。 。

<div class="wrapper">
    <div style="float: left; width: 80px;">Banana</div>
    <div>Vitamin Awesome</div>
</div>

<br clear="both" />後で外側のdivを置き換えることができると思います。

于 2009-12-14T10:27:44.777 に答える