Wie kann ich Standards-Modus arbeiten sowie Quirks-Modus machen?

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

Frage

Der folgende HTML funktioniert gut für mich in FireFox oder IE7 / 8 (mit oder ohne den Stil Tag) 

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

Jedoch habe ich gesagt, dass das Fehlen eines DocType an der Spitze des HTML verursacht sowohl beiden Browser in „Quirks“ -Modus zu arbeiten.

Mir wurde gesagt, das ist schlecht.

Ich habe mehrere DocTypes versucht haben, aber keine DocType / HTML-Kombination, die ergibt sich eine korrekte Wiedergabe in beiden Browsern.

gefunden

Alles anderes als „Quirks“ -Modus bewirkt, dass der Browser auf den Versuch reagieren unterschiedlich die Breite einer Textbox zu setzen. Dies scheint zu einer Position zu führen, wo ich meine Anweisungen entweder für FF oder IE korrigieren und die andere plötzlich versagen.

Einige Detail ...

1.> Das Ziel hierbei ist, dass die drei Zeilen sollten die gleiche Breite zu sein scheinen genau, wenn sie in jedem Browser gerendert. Es ist nicht nessecary dass die gerenderten Breiten die gleichen in allen Browsern sind, nur, dass sie in jedem Browser korrekt gerechtfertigt / alighned erscheinen.

2> Das Bild referenziert ist ein Spacer Bild 3 Pixel breit und 1 hoch (Eine Alternative dazu wäre auch gut)

3.> Ich möchte nicht, Tabellen einzuführen, wenn überhaupt möglich.

Es scheint, als ob der Quirks-Modus der einzige Modus ist, die sich über den Browsern konsistent ist. Ich bin jedoch besorgt, dass die endgültige Version des IE8 oder auch in einem zukünftigen Browser, der Quirks-Modus wird nicht der Standard sein.

Was soll ich tun? Wie geben Sie einen DocType (und vielleicht auch meine html ändern), die ein einheitliches Erscheinungsbild in allen Browsern schaffen?

War es hilfreich?

Lösung

Der wesentliche Unterschied zwischen „Quirks“ und „Einhaltung von Standards“ Modus ist ein anderes „Box-Modell“, die Größen der Berechnung basierend auf Breite / Höhe, Polsterung, Marge und Randeinstellungen auf unterschiedliche Weise zur Folge hat. Im Standard Compliance-Modus wird die effektive Breite und Höhe einer Box berechnet, indem all diese Parameter angeben (bitte im Internet, um weitere Informationen suchen).

Also, da Sie eine 1px-Grenze, die ersten Eingabefelder angeben, werden 302px breit (300px + 2 * 1px für den Rand links und rechts). Die Widersprüchlichkeit zwischen FF und IE Sie erwähnt sind, können durch verschiedene „Standardwerte“ für die „padding“ Einstellung verursacht werden. Getestet habe ich nur den Code mit einem DOCTYPE und ohne Polsterung für die Eingabefelder -. Beide Browser es genauso gemacht 

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

Nun, für die Platzhalterbilder: Verwenden Sie sie nicht. Sie brauchen sie nicht. Verwenden Sie einfach einen rechten Rand „3px“ für die Eingabefelder für die Lücke. 

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 */
}

Sie dann die Mathematik, die richtigen „Breite“ Einstellungen, um zu bestimmen, so dass die Summe aller Breiten (includung Polsterung, Rand und Rand!) In jeder Reihe gleich ist, zum Beispiel: 

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

Beachten Sie, dass "5px" besteht aus den 3px-rechten Rand und 2 mal die Grenze (1px).

Dort gehen Sie. Wenn Sie eine andere Polsterung für ein schöneres Look-and-Feel verwenden möchten, sind sie nur in Ihren Berechnungen!

Andere Tipps

Dies ist ein ausgezeichneter Artikel auf Ihrem DOCTYPE richtig hinzubekommen:
http://www.alistapart.com/stories/doctype/

Da Ihr Problem meist durch unterschiedliche Standardwerte in IE und Firefox verursacht wurde, können Sie in einem CSS Sheet zurücksetzen, die Werte für Dinge wie Polsterung enthält, effektiv die Standardeinstellung für jeden Browser Clearing so, dass sie alle in ähnlicher Weise zu machen.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top