HTMLテーブルの列の高さ。 IEではなくFirefoxで動作します

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

質問

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

<!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行目は、1行目の中央の列（rowspan =＆quot; 2＆quot;に注意）によって作成された垂直方向のスペースを正しく埋めません。代わりに、最初の行の1列目と3列目は、高さを37に設定しても拡大します。下の画像は、IE7とFirefox3で何が起こるかを示しています...

alt text

EDIT：コードスニペットにHTML docタイプを追加しました。スクリーンショットを追加しました。

ご協力ありがとうございました：）

役に立ちましたか？

解決

次のように試してみるとどうなりますか：

<!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>

他のヒント

正解は、テーブルを使用してページをレイアウトしないことです。

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

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

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

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

バリデーターを介して投げると、もう少し近づいていくと思います。

実際-あなたが見ているのはIEの通常の動作です：add border =＆quot; 1＆quot;メインテーブルに追加すると、何が起きているかがより明確に表示されます。

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