6

数時間の欲求不満の後、私は最終的に答えを求めてインターネットに目を向けました. 次の非常に単純なコードを想像してください。

<!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>

これは非常に簡単に思えます。幅 100 ピクセル、高さ 100 ピクセル、境界線 6 ピクセルのテーブル セルを作成します。シンプルに見えますが、ブラウザによって見え方が異なります。IE8 と google chrome では、表のセルは 112 x 112 ピクセルです (内側が 100 ピクセル、外側が 6 ピクセル)。Firefox 3 と Opera では、テーブルは 112 x 100 px です (そのため、何らかの理由で境界線がテーブルの幅に追加されますが、テーブルの高さには追加されません)。

真剣に、何が得られますか？そして、これを各ブラウザーで同じようにレンダリングするにはどうすればよいですか (この場合、テーブルを使用する必要がある div を使用することはできません)。

4

3 に答える 3

0

私はそれを少しいじりましたが、IE7とFirefox2で同じように見えるようにまとめたことがいくつかあります。私がしなければならなかった2つのことは次のとおりです。

a）追加display:block; テーブルセルのスタイルに変更します（FirefoxでIEと同じ方法でセルの高さをレンダリングします）。

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

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

于 2009-03-31T16:15:53.987 に答える