Comment faire en sorte que le mode Standards fonctionne aussi bien que le mode quirks?

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

Question

Le code HTML suivant me convient parfaitement dans FireFox ou IE7 / 8 (avec ou sans la balise Style) 

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

Cependant, on me dit que l'absence d'un DocType en haut du code HTML fait que les deux navigateurs fonctionnent dans "Quirks". mode.

On me dit que c'est mauvais.

J'ai essayé plusieurs DocTypes mais je n'ai pas trouvé de combinaison DocType / HTML permettant un rendu correct dans les deux navigateurs.

Tout autre élément que "Quirks". En mode Mode, les navigateurs réagissent différemment à la tentative de définition de la largeur d’un champ de texte. Cela semble conduire à une position où je peux corriger mes instructions pour FF ou IE et tout à coup l’autre va échouer.

Quelques détails ...

1. > L'objectif ici est que les 3 rangées semblent avoir la même largeur exactement lorsqu'elles sont rendues dans chaque navigateur. Il n’est pas nécessaire que les largeurs de rendu soient les mêmes d’un navigateur à l’autre, mais simplement qu’elles apparaissent correctement justifiées / alignées dans chaque navigateur.

2. > L'image référencée est une image d'espacement de 3 pixels de large et 1 pixel de haut (une alternative à cela serait également bien)

3. > Je ne veux pas introduire de tables si possible.

Il semble que le mode Quirks soit le seul mode cohérent sur tous les navigateurs. Je suis toutefois inquiet que, dans la version finale d'IE8 ou même dans un futur navigateur, le mode quirks ne soit pas le mode par défaut.

Que dois-je faire? Comment spécifier un type de document (et éventuellement modifier mon code HTML) afin de créer une apparence cohérente sur tous les navigateurs?

Était-ce utile?

La solution

La principale différence entre " Quirks " et "Conformité aux normes" le mode est un "modèle de boîte" différent il en résulte différentes façons de calculer les tailles en fonction des paramètres largeur / hauteur, remplissage, marge et bordure. En mode Conformité standard, la largeur et la hauteur effectives d’une boîte sont calculées en ajoutant tous ces paramètres (veuillez rechercher sur le Web pour plus de détails).

Ainsi, puisque vous spécifiez une bordure de 1 px, vos premiers champs de saisie auront une largeur de 302 pixels (300px + 2 * 1px pour les bordures gauche et droite). L’incohérence entre FF et IE que vous avez mentionné peut être due à différentes "valeurs par défaut". pour le " rembourrage " réglage. Je viens de tester votre code avec un DOCTYPE et aucun remplissage pour les champs de saisie - les deux navigateurs l'ont restitué de la même manière. 

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

Maintenant, pour les images d'espacement: ne les utilisez pas. Tu n'as pas besoin d'eux. Utilisez simplement une marge droite de "3px". pour les champs de saisie pour l'écart. 

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

Ensuite, faites le calcul pour déterminer la "largeur" ??correcte. les paramètres de sorte que la somme de toutes les largeurs (y compris les marges, les marges et les marges!) de chaque ligne soit égale, par exemple: 

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

Notez que " 5px " se compose de 3px-right-margin et 2 fois la bordure (1px).

Voilà. Si vous souhaitez utiliser un rembourrage différent pour une apparence plus agréable, incluez-le simplement dans vos calculs!

Autres conseils

C’est un excellent article pour bien préparer votre DOCTYPE:
http://www.alistapart.com/stories/doctype/

Votre problème étant principalement dû à des valeurs par défaut différentes dans IE et Firefox, un Réinitialiser la feuille de style CSS , qui inclut des valeurs pour des opérations telles que le remplissage, effaçant efficacement les valeurs par défaut de chaque navigateur afin que tous les rendus soient similaires.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top