StandardsモードをQuirksモードと同様に機能させるにはどうすればよいですか？

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

質問

次の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。＆gt;ここでの目的は、各ブラウザーでレンダリングしたときに3行が正確に同じ幅に見えるようにすることです。レンダリングされた幅がブラウザー間で同じであることは、ネセカリーではありません。単に、各ブラウザー内で正しく正当化/整列されて表示されるだけです。

2.＆gt;参照される画像は、幅3ピクセル、高さ1のスペーサー画像です（これに代わる方法も良いでしょう）

3.＆gt;可能な限りテーブルを導入したくありません。

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

どうすればよいですか？ブラウザ間で一貫した外観を作成するDocTypeを指定する方法（および、私のhtmlを変更する方法）

役に立ちましたか？

解決

「Quirks」の主な違いおよび「標準への準拠」モードは異なる「ボックスモデル」ですこれにより、幅/高さ、パディング、マージン、境界線の設定に基づいてサイズを計算するさまざまな方法が得られます。標準コンプライアンスモードでは、ボックスの有効な幅と高さは、これらのパラメーターをすべて追加して計算されます（詳細については、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

＆quot; 5px＆quot;に注意してください。 3px-right-marginと2倍のボーダー（1px）で構成されます。

そこに行きます。見栄えを良くするために別のパディングを使用する場合は、計算にそれを含めるだけです！

他のヒント

これは、DOCTYPEを正しく使用するための優れた記事です。
http://www.alistapart.com/stories/doctype/

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

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