9

なぜdoctypeが

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

と

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">

次のブロックを firefox で別の方法でレンダリングしますか?

<table style="border-collapse:collapse; margin:0; padding:0;">
    <tr>
        <td style="border:1px solid red; margin:0; padding:0;"><img src="http://images.smh.com.au/2010/06/01/1533814/th_park-90x60.jpg" style="border:none; padding:0; margin:0;" /></td>
    </tr>
</table>

'Transitional' を使用すると、画像の下に余白がなくなりますが、'Strict' を使用すると余白があります。

2番目の質問、厳密を使用して、この空白を削除することはまったく可能ですか?

4

4 に答える 4

14

この表でわかるように、最初の Doctypeはすべてのブラウザーで quirks モードをトリガーし、2番目は標準モードをトリガーします。

このストーリーの残りは、画像、表、およびミステリアスなギャップに続きます。

画像をブロックにする設定

最初の選択肢であり、ほとんどのグラフィカルなデザインで機能するのは、画像をインライン要素からブロックレベル要素に変換することです。これを行うと、行ボックスが生成されなくなり、問題が解消されます-その表のセルを占めるのは画像だけであると仮定します。最も単純なケースでは、次のようなスタイルを追加できます。

td img {display: block;}
于 2010-06-01T22:33:49.827 に答える
1

私の疑いでは、マークアップ内の空白 (たとえば、表のコードを読みやすくする改行とタブ) に問題があるのではないかと考えています。<li>以前にも同様の問題に遭遇したことがあります。マークアップ内のスペースが問題にならないように見える場所 (タグ間など) でも、画面上に迷惑なスペースが表示されるという問題がありました。

表のマークアップを 1 つの長い行にまとめてみてください。

于 2010-06-01T22:22:17.403 に答える
0

最初の DOCTYPE は、ほぼ標準モードでページをレンダリングします。

「ほぼ標準」モードのレンダリングは、1 つを除いてすべての詳細で「標準」モードと一致します。テーブル セル内の画像のレイアウトは、"quirks" モードの動作と同じ方法で処理されます。

2 番目の DOCTYPE は、標準モードでページをレンダリングします。

于 2010-08-25T02:00:57.790 に答える
0

スペースが発生する理由がわかりません。修正に関する限り、テーブル セルの高さを明示的に設定することを気にしない場合は、display:block; を追加できます。高さ:60px; あなたのTDスタイルに。

于 2010-06-01T22:33:03.243 に答える