Pourquoi les éléments sont-ils différents avec le doctype XHTML Transitional appliqué?

J'ai une page simple avec deux éléments:Pourquoi les éléments sont-ils différents avec le doctype XHTML Transitional appliqué?

<html> 
    <body> 
    <input type="text" style="height: 18px; width: 120px" /><br/> 
    <select style="height: 18px; width: 120px"> 
     <option>test</option> 
    </select> 
    </body> 
</html>

Pour tenter de le rendre conforme w3c et d'afficher systématiquement dans les navigateurs, j'ai ajouté un élément DOCTYPE et un espace de noms XML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <body> 
    <input type="text" style="height: 18px; width: 120px" /><br/> 
    <select style="height: 18px; width: 120px"> 
     <option>test</option> 
    </select> 
    </body> 
</html>

Le CSS est juste une tentative de rendre les largeurs et les hauteurs de la boîte de texte et de la boîte de sélection identiques.

Cependant, pour une raison quelconque, la deuxième page ne respecte plus les attributs CSS de hauteur et de largeur que j'ai définis sur l'étiquette d'entrée. La zone de texte est d'environ 4 pixels de plus dans chaque navigateur (IE, Firefox, Chrome) et de 4 à 6 pixels de plus dans chaque navigateur.

J'ai utilisé divers outils de développement pour essayer de trouver quel balisage supplémentaire est appliqué, mais je n'en trouve pas.

Si possible, quelqu'un pourrait-il m'expliquer ce comportement?

Toute aide serait grandement appréciée.

Merci,

B.J.

Source

2010-08-09 Benny

Votre code n'est pas compatible XHTML, vous manque un élément de tête:

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

    <!-- head goes here --> 
    <head> 
    <title>My page title</title> 
    </head> 

    <body> 
    <input type="text" style="height: 18px; width: 120px" /><br/> 
    <select style="height: 18px; width: 120px"> 
     <option>test</option> 
    </select> 
    </body> 
</html>

Si vous voulez faire les entrées les mêmes, vous devez les style de la façon suivante:

<style type="text/css"> 
input[type="text"], select{ 
    width: 120px; 
    height: 18px; 
    padding: 0; 
    margin: 0; 
    border:1px solid grey; 
} 
</style>

~~Ceci est une bonne référence pour l'écriture correcte XHTML http://www.w3schools.com/xhtml/xhtml_intro.asp~~

Un article concernant de bonnes ressources et un bonne explication pourquoi le site ci-dessus n'est pas une bonne référence: W3Fools.

Source

2010-08-09 15:09:01 hitautodestruct

Cela me rapproche un peu mais les éléments ne sont pas tout à fait les mêmes. La zone de texte est environ 2 pixels de plus et plus longue que la zone de sélection. – Benny

Je viens de jeter un œil aux pages XHTML de w3schools, et franchement, le conseil est terrible, avec des omissions importantes dans tous les endroits où nous voyons régulièrement des questions sur le SO. Je ne le recommanderais à personne. – Alohci

Les boîtes de sélection présentent toujours des problèmes de style, essayez d'ajouter la largeur et la hauteur à la sélection pour correspondre à l'entrée. – hitautodestruct

Non specificying un doctype peut mettre plusieurs navigateurs en mode de compatibilité. Sans réellement enquêter je devinerais que la page sans le doctype est mal rendue. Essayez de mettre un doctype (html4 ou quelque chose) sur le premier échantillon et voyez ce qui se passe.

Édition: La plus grande cause de différences de rendu provient des modes de compatibilité. Avant d'essayer de rechercher les différences, assurez-vous que votre balisage est valide (http://validator.w3.org/) comme le sont vos feuilles stlyes (http://jigsaw.w3.org/css-validator/). Si votre balisage ne dit pas au navigateur comment l'analyser, ou contient des erreurs, le navigateur fera probablement des erreurs en rendant la page.

Dans votre exemple, il est probablement exécuté en mode quirks sur le balisage no-doctype provoquant des erreurs de feuille de style.

Source

2010-08-09 14:39:55

Le deuxième exemple est le premier exemple avec un doctype et un espace de noms ajouté. – Benny

Le premier exemple pourrait bien être celui avec le problème. Si les navigateurs le rendent en mode de compatibilité parce qu'il n'a pas de doctype. –

Je dis que les premier et deuxième exemples sont les mêmes; le deuxième exemple est la solution au problème du premier exemple. – Benny

Pourquoi les éléments sont-ils différents avec le doctype XHTML Transitional appliqué?

Répondre

Questions connexes