Google Chromeの表形式（純粋なHTML）

Question

私はこのコードでどこを間違えているのか理解しようとしていますが、できません。 FirefoxとIEでは正常に動作しますが、Chromeでは内部のセルはコードのように中央に配置されていません。 firtsの画像は、Firefoxはそれを行う方法Googleのクロムはそれをレンダリングする方法を示し、第二のみ一部のフォントのdiferentsで

.style1 { 
    text-align: center; 
    font-family: Verdana, Geneva, Tahoma, sans-serif; 
    font-size: 32px; 
    color: #2B2B2B; 
    width: 600px; 
} 

：として

<table cellpadding="0" cellspacing="0" style="width: 100%"> 
    <tr> 
     <td rowspan="7"></td> 
     <td style="width: 600px; height: 100px;">&nbsp;</td> 
     <td rowspan="7"></td> 
    </tr> 
    <tr> 
     <td class="style1" valign="top"><?php echo($title); ?></td> 
    </tr> 
    <tr> 
     <td class="style2" valign="top"><?php echo($subtitle); ?></td> 
    </tr> 
    <tr> 
     <td class="style3" valign="top"><?php echo($content); ?></td> 
    </tr> 
    <tr> 
     <td class="style4"><?php echo($endtitle); ?></td> 
    </tr> 
    <tr> 
     <td style="width: 600px; height: 30px"></td> 
    </tr> 
    <tr> 
     <td style="width: 600px; height: 100px" class="style5" valign="top"></td> 
    </tr> 
</table> 

STYLE1及び2とそうは簡単です：

Answer 1

tdの幅を定義していないので、親の全幅。あなたが追加した場合はtd {width:600px;}も同じクロムになります。 firebugでtdを調べると、offsetWidthが600であるDOMが見つかりますが、Chromeの開発ツールで同じことを行うと、offsetWidthは1900（または画面に応じた値）になります。したがって、すべてのブラウザで同じ結果を得るには、上記のように固定幅を設定する必要があります。

Answer 2

テーブルの幅を設定する必要があります。あなたのtdの幅を設定するのは不適切な形式です。あなたのHTMLは次のようになります。

<table cellpadding="0" cellspacing="0" style="width:600px"> 
    <tr> 
     <td rowspan="7"></td> 
     <td style="width: 600px; height: 100px;">&nbsp;</td> 
     <td rowspan="7"></td> 
    </tr> 
    <tr> 
     <td class="style1" valign="top"><?php echo($title); ?></td> 
    </tr> 
    <tr> 
     <td class="style2" valign="top"><?php echo($subtitle); ?></td> 
    </tr> 
    <tr> 
     <td class="style3" valign="top"><?php echo($content); ?></td> 
    </tr> 
    <tr> 
     <td class="style4"><?php echo($endtitle); ?></td> 
    </tr> 
    <tr> 
     <td style="width: 600px; height: 30px"></td> 
    </tr> 
    <tr> 
     <td style="width: 600px; height: 100px" class="style5" valign="top"></td> 
    </tr> 
</table> 

そして、あなたのスタイリングは、次のようになります。

.style1 { 
    text-align: center; 
    font-family: Verdana, Geneva, Tahoma, sans-serif; 
    font-size: 32px; 
    color: #2B2B2B; 
    width: 100%; 
}