2010-12-06 9 views
0

このHTMLテーブルは、一部のブラウザで誤解されている、と私は理解できない理由:Internet Explorer 8のcolspanの解釈が正しくありませんか?

Chromeと展望ディスプレイ2番目と3番目のラインの第二細胞は第4セル上を通過、私は期待してレンダリング、行4行4〜10の4番目のセルは2番目と3番目のラインの第二細胞「の後に開始」表示何か違うのInternet Explorer 8とOpera 10、Screenshot of Chrome rendering http://www.team-logics.com/public/stackoverflow/2010-12-05-Chrome.png

10へ。

Screenshot of Internet Explorer 8 rendering http://www.team-logics.com/public/stackoverflow/2010-12-05-IE.png

どれが推測するには、なぜ私のcolspansらrowspansは同じように解釈されませんか? どちらのブラウザが正しいですか? コードをすべてChromeのように表示するにはどうすればよいですか?

私の実際のコード: (申し訳ありませんが、汚いコード、これは電子メールの署名であることを意味する)

<table border=0 cellspacing=0 cellpadding=0 width=400 style='width:300pt;border-collapse:collapse;border:1px solid black;'> 
<tr style='height:9.75pt'> 
    <td colspan=6 valign=top style='border:1px solid black;height:9.75pt;width:300pt;' width="400"> 
    </td> 
</tr> 
<tr style='mso-yfti-irow:1;height:12pt' height="16"> 
    <td rowspan=9 valign=top style='border:1px solid black;height:12pt;width:14.25pt' width="19"> 
    </td> 
    <td bgcolor="red" colspan=3 valign=top style='border:1px solid black;height:12pt;width:203.25pt;' width="271"> 
    </td> 
    <td rowspan=2 valign=top style='border:1px solid black;height:12pt;width: 72pt' width="96"> 
    </td> 
    <td rowspan=2 valign=top style='border:1px solid black;height:12pt;width:10.5pt' width="14"> 
    </td> 
</tr> 
<tr style='mso-yfti-irow:2;height:12pt' height="16"> 
    <td bgcolor="red" colspan=3 valign=top style='border:1px solid black;height:12pt;width:203.25pt;' width="271" height="16"> 
    </td> 
</tr> 
<tr style='mso-yfti-irow:3;height:3.75pt' height="5"> 
    <td colspan=2 valign=top style='border:1px solid black;height:3.75pt;width:170.25pt' width="227" height="5"> 
    </td> 
    <td colspan=3 rowspan=7 valign=top style='border:1px solid black;height:3.75pt;width:115.5pt' width="154"> 
    </td> 
</tr> 
<tr style='mso-yfti-irow:4;height:11.25pt' height="15"> 
    <td valign=top style='border:1px solid black;height:11.25pt;width:27.75pt' width="37"> 
    </td> 
    <td valign=top style='border:1px solid black;height:11.25pt;width:142.5pt' width="190"> 
    </td> 
</tr> 
<tr style='mso-yfti-irow:5;height:11.25ptpt' height="15"> 
    <td valign=top style='border:1px solid black;height:11.25pt;width:27.75pt' width="37" height="15"> 
    </td> 
    <td valign=top style='border:1px solid black;height:11.25pt;width:142.5pt' width="190" height="15"> 
    </td> 
</tr> 
<tr style='mso-yfti-irow:6;height:3.75pt' height="5"> 
    <td colspan=2 valign=top style='border:1px solid black;height:3.75pt;width:170.25pt' width="227"> 
    </td> 
</tr> 
<tr style='mso-yfti-irow:7;height:11.25pt' height="15"> 
    <td colspan=2 valign=top style='border:1px solid black;height:11.25pt;width:170.25pt' width="227" height="31" > 
    </td> 
</tr> 
<tr style='mso-yfti-irow:8;height:23.25pt' height="31"> 
    <td colspan=2 valign=top style='border:1px solid black;height:23.25pt;width:170.25pt' width="227"> 
    </td> 
</tr> 
<tr style='mso-yfti-irow:9;mso-yfti-lastrow:yes;height:50.25pt' height="67"> 
    <td colspan=2 valign=top style='border:1px solid black;height:50.25pt;width:170.25pt' width="227"> 
    </td> 
</tr> 
</table> 
+0

画像が表示されなくなりました。 –

答えて

0

それはおそらく列の多くは、あなたが持っていることを助けていません。 CSSの幅(style属性で指定)と実際の幅の両方を指定します。これらの2つの値は異なっているように見えます。ブラウザがどのように使用するかを決めるには違いがあると私は考えています。重複を削除して、何が起こるかを確認してください。

+0

答えてくれてありがとう、スティーブン。残念ながら、これは私の問題の原因ではなく、もともとはpx幅しかありませんでした。私はスタイルの幅を追加しました。なぜなら、私は一部の電子メールリーダーにとってうまくいきました。 – Jalil

+0

すべての値を96px = 72ptに設定しました。 – Jalil

+0

それはポイントサイズの解釈の違いかもしれません。私にユーモアを与えるために、ポイントサイズをピクセルサイズに置き換えてみてください(少なくとも一貫性があります)。 –

関連する問題