2

次の Html は、FireFox または IE7/8 (スタイル タグの有無にかかわらず) でうまく機能します。

<!-- Deliberately no DocType to induce Quirks Mode -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        Input.quirks
        {
            margin: 1px 0px 1px 0px;
            border: solid black 1px;
        }
    </style>
</head>
<body>
Should work in Quirks Mode <br />
    <input class="quirks" type="text" style="width: 300px;" /><br />
    <input class="quirks" type="text" style="width: 147px;" /><img src="./Graphics/SpacerPixel.gif" border="0" /><input class="quirks" type="text" maxlength="25" style="width: 150px;" /><br />
    <input class="quirks" type="text" style="width: 94px;" /><img src="./Graphics/SpacerPixel.gif" border="0" /><input class="quirks" type="text" style="width: 100px;" /><img src="./Graphics/SpacerPixel.gif" border="0" /><input class="quirks" type="text" value="DA8 1DE" style="width: 100px;" />
</body>
</html>

ただし、上記の HTML の上部に DocType がないため、両方のブラウザーが「Quirks」モードで動作するようになっていると言われています。

これはダメだと言われます。

いくつかの DocType を試しましたが、両方のブラウザーで正しいレンダリングを生成する DocType/HTML の組み合わせが見つかりませんでした。

「Quirks」モード以外では、テキストボックスの幅を設定しようとする試みに対してブラウザが異なる反応を示します。これは、FF または IE のいずれかの命令を修正できる位置につながるようで、突然、もう一方が失敗します。

細かいところ...

1.> ここでの目的は、3 つの行が各ブラウザーでレンダリングされたときに正確に同じ幅に見えるようにすることです。レンダリングされた幅がブラウザー間で同じである必要はありません。単に、各ブラウザー内で正確に位置合わせ/整列されて表示されるだけです。

2.> 参照されている画像は、幅 3 ピクセル、高さ 1 ピクセルのスペーサー画像です (これに代わるものも良いでしょう)。

3. > できればテーブルを導入したくない。

Quirks モードは、ブラウザー間で一貫している唯一のモードのようです。しかし、IE8 の最終バージョン、または実際には将来のブラウザーでは、quirks モードがデフォルトにならないのではないかと心配しています。

私は何をすべきか ？ブラウザー間で一貫した外観を作成する DocType を指定する (およびおそらく html を変更する) にはどうすればよいですか?

4

2 に答える 2

9

"Quirks" モードと "Standards Compliance" モードの主な違いは、異なる "ボックス モデル" であり、幅/高さ、パディング、マージン、ボーダー設定に基づいてサイズを計算する方法が異なります。標準準拠モードでは、ボックスの有効な幅と高さは、これらすべてのパラメーターを加算して計算されます (詳細については、Web を検索してください)。

したがって、1px-border を指定するため、最初の入力フィールドの幅は 302px (300px + 2*1px の左右の境界線) になります。あなたが言及したFFとIEの不一致は、「パディング」設定の「デフォルト値」が異なることが原因である可能性があります。入力フィールドのパディングなしで DOCTYPE を使用してコードをテストしたところ、両方のブラウザで同じようにレンダリングされました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

さて、スペーサー画像について：それらを使用しないでください。それらは必要ありません。ギャップの入力フィールドに「3px」の右マージンを使用するだけです。

input.quirks {
    margin: 1px 3px 1px 0px;  /* 3px right margin */
    border: solid black 1px;
    padding: 0px;             /* so that IE and FF use the same padding */
}

次に、各行のすべての幅 (パディング、ボーダー、マージンを含む!) の合計が等しくなるように、正しい「幅」設定を決定するために計算を行います。次に例を示します。

300px + 5px = 305px
145px + 150px + 2*5px = 305px
90px + 100px + 100px + 3*5px = 305px

「5px」は 3px-right-margin と 2 回の境界線 (1px) で構成されることに注意してください。

ほらね。見栄えを良くするために別のパディングを使用したい場合は、計算に含めるだけです!

于 2009-01-06T12:25:18.813 に答える
0

あなたの問題は主に IE と Firefox のデフォルト値の違いが原因だったので、パディングなどの値を含むCSSスタイルシートのリセットに関心があるかもしれません。すべてのブラウザのデフォルト値を効果的にクリアして、すべてのブラウザが同様にレンダリングされるようにします。

于 2009-01-24T22:15:51.933 に答える