IE（7）のテーブルレイアウトが間違っている

StackOverflow https://stackoverflow.com/questions/197266

質問

以下は、テーブルレイアウトを持つ単純な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>
役に立ちましたか？

解決

真ん中の行の最小の高さ（行にまたがるセルのみを含む行）、および補正するために隣接する行の高さの拡大について不平を言っていると仮定し、div間にギャップを残します。

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

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

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

他のヒント

最初に、CSS値には単位が必要です。 width：190; は width：190px;

でなければなりません

完全に同意します。ブループリントCSSまたは他のCSSフレームワークをご覧ください。

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

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

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（欠落しているユニットを選択します長さの値について））。

必ずCSSを使用してください。レイアウトにテーブルを使用しないでください。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top