IE/ChromeとFirefox/Operaで表のセルと境界が異なって表示される

数時間の不満の後、私は最終的に答えとしてインターネットに向かいました。このコードの非常にシンプルな作品を想像：IE/ChromeとFirefox/Operaで表のセルと境界が異なって表示される

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
    <head> 
     <title>AARRRRRRGH</title> 
    </head> 
    <body> 
     <table> 
      <tr> 
       <td style="width: 100px; height: 100px; background: #000000; padding: 0px; border: 6px solid #FF0000;"></td> 
      </tr> 
     </table> 
    </body> 
</html>

を今、これは100pxに広いと計6Pxボーダーと100pxに高いテーブルセルを作成し、非常に簡単と思われます。シンプルであるように、それはブラウザによって異なって見えます。 IE8とgoogle chromeでは、表のセルは112 x 112ピクセル（100ピクセルの内側と外側の6ピクセル）です。 Firefox 3とoperaでは、テーブルは112 x 100ピクセルです（なんらかの理由で、境界線はテーブルの幅に追加されますが、テーブルの高さには追加されません）。

真剣に、何ができますか？そして、どのように私はこのブラウザで同じレンダリングを行うことができます（と私はdivを使用することはできません私はこの場合はテーブルを使用する必要があります）。

出典

2009-03-31 Anonymous

真剣に、何を与えるのですか？

ええと...表のセルの高さと垂直方向の境界線は、CSS 2.1仕様ではあまりよく定義されていません。それらがどのように相互作用するかを完全に説明するものは何もなく、標準的なブロックモデルではそれをカバーしていません。 17.6.1項の幅の定義が尖っていることを示す図は高さをカバーしていない。

FWIW Mozilla/Operaの解釈は意味をなさないと思いますが、間違っているとは言えません。

どのようにこのブラウザを同じブラウザでレンダリングすることができますか（また、私はdivを使用できません。この場合はテーブルを使用する必要があります）。

テーブル内のdivはどうですか？

<td style="width: 100px; background: black; padding: 0; border: 6px solid red;"> 
    <div style="height: 100px;">...</div> 
</td>

「100px」がどの測定値を参照しているかはっきりしています。これは私のために働く。

出典

2009-03-31 18:31:51 bobince

ええ、私の問題を解決しました。私は前にこの解決策を無視しました。なぜなら、別の状況で大まかなアニメーションの問題があったからです。この状況ではそれは動作します:) –

他のドックタイプを試しましたか？私は二つのこと、彼らがIE7とFirefox 2で私のために同じことを見せていたこと、一緒に入れ、私はそれで少し周りめちゃめちゃ、およびカップルの事があります

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

出典

2009-03-31 15:00:54

私は上記のコードでdoctypeを置き換えようとしました...いいえsucces –

：私は幸運を持っていました

a）display:blockを追加しました。テーブルセルのスタイル（FirefoxはIEと同じようにセルの高さをレンダリングします）。

b）セルに改行されていないスペースを追加しました（そうでないと、IEは境界線を表示しませんでした）。

IE8またはFirefox 3がロードされていませんが、試してみることができます。表示をブロックに変更することに副作用があるかどうかはわかりませんが、問題は解決します。

出典

2009-03-31 16:15:53 patmortech

'display：block'は、IE以外のブラウザでは表のセルとして扱われるセルを停止するので、他のセルはレイアウトを崩壊させます。 – bobince

実際にそれを確認したのですか？私はFirefox 2でそれを見ていて、他のテーブルのセルと同じように見えます。 – patmortech

nbspはIEの空のテーブルセルにのみ必要です（そうでなければセルはありません） – borrel

IE/ChromeとFirefox/Operaで表のセルと境界が異なって表示される

答えて

関連する問題