Pourquoi le 'padding' compte-t-il parfois à l'intérieur de la largeur d'un élément, et parfois non?

Question

J'ai fait un bookmarklet qui, entre autres choses, charge un formulaire dans un div "popup". Je réinitialise chaque balise CSS connue de l'humanité sur chaque élément que je crée, et autant que je sache l'examiner dans firebug, aucune balise CSS ne «traverse». Cependant, sur certaines pages, la largeur d'entrée comprend son rembourrage:

input.clientWidth = input.style.width 

sur d'autres pages, la largeur d'entrée ne pas comprennent le rembourrage:

input.clientWidth = input.style.width + input.style.paddingLeft + input.style.paddingRight 

En tant que tel, voici un petit code extrait:

input.style.width = '300px'; 
input.style.border = '1px solid grey'; 
input.style.padding = '20px'; 
alert(input.clientWidth); 

sur certaines pages, nous avons signalé 298 (300 - la frontière 1px), et sur d'autres pages nous avons signalé 338 (300 - la frontière 1px + 20 + 20). Quelles sont les causes? Et plus important encore, que puis-je faire pour obtenir un comportement cohérent?

Edit:

Ceci est tous dans le même navigateur - Firefox 3.6.8

Answer 1

Pour IE il se pourrait que certaines pages sont en mode bizarreries où le modèle de boîte n'est pas le standard utilisé .

Le document.compatMode serait CSS1Compat pour le mode standard et BackCompat pour le mode quirks. Vous pouvez ramifier le calcul en fonction de cela. De toute évidence, il serait utile si vous nous avez montré deux pages distinctes qui varient, mais comme il s'agit d'un bookmarklet et qu'il est invoqué sur différents sites, il serait logique.

Answer 2

Pour un comportement cohérent, vous pouvez tenir le rembourrage, la marge et la frontière dans toutes les largeurs, à savoir (pseudocode)

totalWidth = input.width + input.padding + input.margin + input.border;

De toute évidence, vous devez faire quelques manipulations de chaîne pour choisir les entiers là-bas et puis ajoutez-les.