Come faccio a far funzionare la modalità Standard e la modalità stranezze?

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

Domanda

Il seguente codice HTML funziona perfettamente per me in FireFox o IE7 / 8 (con o senza il tag di stile) 

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

Comunque mi è stato detto che l'assenza di un DocType nella parte superiore di detto HTML sta facendo funzionare entrambi i browser in "Quirks" modalità.

Mi è stato detto che non va bene.

Ho provato diversi DocTypes ma non ho trovato una combinazione DocType / HTML che produca un rendering corretto in entrambi i browser.

Qualunque cosa diversa da " Quirks " mode fa sì che i browser reagiscano in modo diverso al tentativo di impostare la larghezza di una casella di testo. Questo sembra portare a una posizione in cui posso correggere le mie istruzioni per FF o IE e improvvisamente l'altro fallirà.

Alcuni dettagli ...

1. > L'obiettivo qui è che le 3 righe dovrebbero apparire esattamente della stessa larghezza quando vengono visualizzate in ciascun browser. Non è necessario che le larghezze renderizzate siano le stesse tra i browser, semplicemente che appaiano correttamente giustificate / accese all'interno di ciascun browser.

2. > L'immagine a cui si fa riferimento è un'immagine spaziatore larga 3 pixel e 1 alta (un'alternativa sarebbe buona)

3. > Non voglio introdurre tabelle se possibile.

Sembra che la modalità Quirks sia l'unica modalità coerente tra i browser. Sono preoccupato, tuttavia, che nella versione finale di IE8 o in alcuni browser futuri, la modalità stranezze non sarà quella predefinita.

Cosa devo fare? In che modo specificare un DocType (e forse modificare il mio codice HTML) che creerà un aspetto coerente nei browser?

È stato utile?

Soluzione

La differenza principale tra " Quirks " e "conformità agli standard" la modalità è un modello "box" diverso " che si traduce in diversi modi di calcolare le dimensioni in base a larghezza / altezza, imbottitura, margine e impostazioni del bordo. Nella modalità Conformità standard, la larghezza e l'altezza effettive di una scatola vengono calcolate aggiungendo tutti questi parametri (per ulteriori informazioni, cercare nel Web).

Quindi, poiché specifichi un bordo 1px, i tuoi primi campi di input saranno larghi 302px (300px + 2 * 1px per il bordo sinistro e destro). L'incoerenza tra FF e IE menzionata potrebbe essere causata da diversi "valori predefiniti" per l '"imbottitura" ambientazione. Ho appena testato il tuo codice con un DOCTYPE e senza riempimento per i campi di input - entrambi i browser lo hanno reso allo stesso modo. 

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

Ora, per le immagini spaziatore: non usarle. Non hai bisogno di loro. Usa solo un margine destro di "3px" per i campi di input per il gap. 

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

Quindi fai i calcoli per determinare la "larghezza" corretta impostazioni in modo che la somma di tutte le larghezze (inclusi padding, border e margin!) in ogni riga sia uguale, ad esempio: 

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

Nota che " 5px " consiste nel margine destro 3px e 2 volte il bordo (1px).

Ecco qua. Se vuoi usare un'imbottitura diversa per un aspetto più gradevole, includilo nei tuoi calcoli!

Altri suggerimenti

Questo è un eccellente articolo su come ottenere il DOCTYPE giusto:
http://www.alistapart.com/stories/doctype/

Poiché il tuo problema è stato principalmente causato da diversi valori predefiniti in IE e Firefox, potresti essere interessato a Reimposta CSS foglio di stile, che include valori per cose come il riempimento, cancellando efficacemente i valori predefiniti per ogni browser in modo che tutti vengano visualizzati in modo simile.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top