HTMLテーブルの列の高さ。 IEではなくFirefoxで動作します
-
05-07-2019 - |
質問
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"> </td>
<td valign="top" bgcolor="#112233"> </td>
</tr>
</table>
</body>
2行目は、1行目の中央の列(rowspan =&quot; 2&quot;に注意)によって作成された垂直方向のスペースを正しく埋めません。代わりに、最初の行の1列目と3列目は、高さを37に設定しても拡大します。下の画像は、IE7とFirefox3で何が起こるかを示しています...
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;メインテーブルに追加すると、何が起きているかがより明確に表示されます。
所属していません StackOverflow