4

以下は、テーブルレイアウトを使用した単純なhtmlのコードです。FFでは、私が思うように見えますが、IE7ではそうではありません。私は何が間違っているのですか？

そして、どうすればそれを修正できますか？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <TITLE>test</TITLE>
    </head>
    <body>
        <table  id="MainTable" cellspacing="0" cellpadding="0" border="1">
        <tbody>
            <tr>
                <td colspan="4">
                    <div style='width:769; height:192;'>192
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="2" valign="top">
                    <div style='width:383; height:100;'>100
                    </div>
                </td>
                <td rowspan="2" valign="top">
                    <div style='width:190; height:200;'>200
                    </div>
                </td>
                <td rowspan="2" valign="top">
                    <div style='width:190; height:200;'>200
                    </div>
                </td>
            </tr>
            <tr>
                <td  valign="top" rowspan="2">
                    <div style='width:190; height:200;'>200
                    </div>
                </td>
                <td  valign="top" rowspan="2">
                    <div style='width:190; height:200;'>200
                    </div>
                </td>
            </tr>
            <tr>
                <td valign="top">
                    <div style='width:190; height:100;'>100
                    </div>
                </td>
                <td valign="top" >
                    <div style='width:190; height:100;'>100
                    </div>
                </td>                           
            </tr>
            <tr>
                <td colspan="2">
                    <div style='width:383; height:100;'>100
                    </div>
                </td>
                <td colspan="2">
                    <div style='width:383; height:100;'>100
                    </div>
                </td>
            </tr>

            <tr>
                <td>
                    <div style='width:190; height:100;'>100
                    </div>
                </td>
                <td>
                    <div style='width:190; height:100;'>100
                    </div>
                </td>
                <td colspan="2">
                    <div style='width:383; height:100;'>100
                    </div>
                </td>
            </tr>
        </tbody>
        </table>
    </body>
</html>
4

6 に答える 6

4

中央の行 (行にまたがるセルのみを含む行) の最小の高さと、それを補うために隣接する行の高さを拡大し、div 間にギャップを残していることに不満を持っていると思います。

行にまたがるセルのみが含まれている場合、IE は最適な行の高さを計算できません。行スパンを取り除くために絶対に調整できない場合の通常の解決策は、テーブルの片側に 1 ピクセルの「ダミー」列を追加し、空のセルを含み、それぞれの「高さ」を行の高さに設定することです。

しかし、はい、これで何をしようとしているのかによっては、CSS レイアウトの方が適切かもしれません。この例のように本当にすべて固定ピクセルのレイアウトである場合、各 div の絶対配置は非常に簡単になります。

その他のビット: CSS の幅/高さの値には単位 (おそらく 'px') が必要です。valign/cellspacing/など。テーブル レイアウトを使用している場合でも、スタイルシートでより簡単に実行できます。標準モードの DOCTYPE は、より悪い IE のバグの一部を防ぐことができます (ただし、この古い CSS に関連しないバグではありません)。

于 2008-10-13T11:42:16.270 に答える
3

まず、CSS値には単位がwidth:190;必要です。width: 190px;

于 2008-10-13T11:23:23.907 に答える
0

完全に同意します。いくつかのヘルプについては、ブループリントCSSまたは他のCSSフレームワークを参照してください。

于 2008-10-13T11:22:48.883 に答える
0

Doctype (システム識別子 (url) のない 4.01 Transitional) を選択すると、IE で Quirks モードがトリガーされ、他のブラウザーとの一貫性が著しく損なわれます。

切り替える：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

または少なくとも：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

(もちろん、 HTML と CSS のみを検証します (これにより、長さの値に不足している単位が選択されます))。

于 2008-10-13T12:31:48.387 に答える
0

一見すると、IE7 ではこの種のフォーマットのサポートが壊れているように見えます。最初は、div を取り除き、書式設定 (幅と高さ) を TD に直接移動することを提案するつもりでしたが、それを試してみましたが、問題は解決していないようです。

これは良い解決策ではないと思いますが、rowspan セルを、それらの間に目に見えない境界線を持つより多くのセルに置き換えることは可能でしょうか? ただし、テキストが上部セルのサイズよりも大きい場合、このソリューションは失敗します。

于 2008-10-13T11:42:15.833 に答える
-3

間違いなく CSS を使用する必要があります。テーブルをレイアウトに使用しないでください。

于 2008-10-13T12:00:19.137 に答える