IE / ChromeとFirefoxの/オペラで異なる表示を表のセルと境界

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

  •  22-08-2019
  •  | 
  •  

質問

は、フラストレーションの数時間後、私は最終的に答えをインターネットになりました。このコードの非常にシンプルな作品を想像します：

<!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のテーブルセルをクロム（そう100pxに内外計6Px）112 X 112ピクセルです。 Firefox 3のオペラハウスのテーブルは、112×100ピクセルである（境界がテーブル幅にではなく、テーブルの高さに追加された何らかの理由ように）。

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

役に立ちましたか？

解決

  

真剣に、与えるもの？

うん...表のセルの高さと垂直方向の境界線は実際にはかなりCSS 2.1仕様に不明確されています。そこに彼らがどのように相互作用するかを完全に説明するものは何もない、と標準ブロックモデルはかなりそれをカバーしていません。彼らはあからさま幅の定義を発揮セクション17.6.1の図は、高さをカバーしていません。

FWIW私は、Mozilla /オペラの解釈はどんな意味があるとは思わないが、私はそれがアウトとアウト間違っていると言うことはできません。

  

どのように私は（とがない私は、このケースでは、テーブルを使用する必要がdiv要素を使用することはできません）これは、各ブラウザで同じようにレンダリングすることができます。

どのようにテーブル内のdivのでしょうか？

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

今では「100pxには」を意味し、測定され明らかです。これは私のために動作します。

他のヒント

あなたは他の文書型を試してみましたか？私は幸運を持っています：

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

私がしなければならなかった二つのことがあっIE7とFirefox 2でそれらが私のために同じことを見せていたこと、一緒に入れ、私はそれを周りに少し混乱し、カップルの事があります

A）display:blockを追加します。表のセルのスタイルに（FirefoxはIEがやったのと同じ方法で、セルの高さをレンダリング製）;

B）（そうでない場合はIEが境界線を表示しませんでした）のセルに改行なしスペースを追加します。

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

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