0

FireFox3/Opera/Safari では正常に表示される HTML がありますが、IE7 では表示されません。スニペットは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
    <body bgcolor="#AA5566" >
    <table width="100%">

      <tr>

        <td height="37" valign="top"><img style="float:right;" border="0" src="foo.png" width="37" height="37"/></td>

        <td width="600" rowspan="2" >
          <table width="600" height="800"><tr><td><img src="bar.jpg" width="600" height="800"/></td></tr></table>
        </td>

        <td height="37" valign="top"><img style="float:left;" border="0" src="foo.png" width="37" height="37"/></td>

      </tr>

      <!-- This row doesnt fill the vertical space on IE7 //-->
      <tr>
        <td valign="top" bgcolor="#112233">&nbsp;</td>
        <td valign="top" bgcolor="#112233">&nbsp;</td>
      </tr>

    </table>
    </body>

2 番目の行は、最初の行の中央の列 (rowspan="2" に注意してください) によって作成された垂直方向のスペースを正しく埋めません。代わりに、高さを 37 に設定しても、最初の行の 1 番目と 3 番目の列が下に展開されます。下の画像は、IE7 と Firefox3 で何が起こるかを示しています...

代替テキスト

編集: HTML ドキュメント タイプをコード スニピットに追加しました。スクリーンショットを追加しました。

どんな助けでも感謝します、ありがとう:)

4

4 に答える 4

3

正しい答えは、表を使用してページをレイアウトしないことです。

技術的な答えは次のとおりです。表のセルは本来の機能を果たしています。つまり、使用しているコード構造では問題を解決できません。

ハックな答えは次のとおりです。左右のセルの高さを正確に 37 ピクセルにするには、左右のセルにネストされたテーブルを 2 つ追加する必要があります。

于 2008-10-30T18:47:35.070 に答える
2

次のように試してみるとどうでしょうか。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
    <body bgcolor="#AA5566" >
    <table width="100%" border='1'>

      <tr>

        <td valign="top">
            <table bgcolor="#112233" height="37" width='100%'><tr><td>asdf</td></tr></table><br />
            Other content
        </td>

        <td width="600" rowspan="2" >
          <table width="600" height="800"><tr><td>asdf</td></tr></table>
        </td>

        <td valign="top">
            <table bgcolor="#112233" height="37" width='100%'><tr><td>asdf</td></tr></table><br />
            Other content
        </td>

      </tr>



    </table>
    </body>
于 2008-10-30T18:55:25.493 に答える
0

なぜそれが起こっているのかよくわかりません。どのようなレイアウトを実現しようとしていますか?それは本当にテーブルである必要がありますか? 表を含むページをレイアウトするべきではありません。真の表形式のデータにのみ使用する必要があります。

div の使用を検討しましたか?

于 2008-10-30T17:29:09.627 に答える
0

それをバリデーターに通せば、もう少し近づくことができると確信しています。

実際、あなたが見ているのは IE の通常の動作です: メイン テーブルに border="1" を追加すると、何が起こっているのかが少し明確になります。

于 2008-10-30T18:19:25.703 に答える