Pourquoi 150 + 150 n'égale-t-il pas 300 dans les navigateurs?

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

  •  03-07-2019
  •  | 
  •  

Question

J'ai le code HTML suivant 

<!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 runat="server">
    <style>
    .box {
        border: solid black 1px;
        padding: 0px;
        margin: 0px;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <input class="box" style="width:300px;" /><br /><!--CRLF for clarity only-->
        <input class="box" style="width:150px;" /><!--CRLF for clarity only-->
        <input class="box" style="width:150px;" /><!--CRLF for clarity only-->
    </form>
</body>
</html>

Lors du rendu, la deuxième ligne de zones de texte semble être plus longue que le 1 de la première ligne. Ceci malgré le réglage explicite des largeurs via l'attribut style

Pourquoi cela se produit-il et puis-je l'éviter?

Remarque: cela semble fonctionner de la même manière dans FF3 et IE7

Était-ce utile?

La solution

jhunter est correct, et j’ajouterais que vous avez besoin de Firebug pour FireFox (gratuit). Vous auriez pu comprendre cela vous-même rapidement avec celui installé. Inspectez l'élément qui vous intéresse et examinez le "modèle". onglet.

Autres conseils

Il y a une bordure sur une zone de texte qui n'est pas incluse dans la largeur.

En effet, la largeur de vos cases est de +2; une bordure à la fois à gauche et à droite (1px) signifie qu'il y a 2 pixels supplémentaires par case. Donc, au total, vous êtes +6.

Je suggérerais de lire CSS Mastery, qui explique en grande partie les différences entre les différents modèles de boîte de navigateur et leur incidence sur la disposition et la largeur de différents navigateurs.

Maîtrise des CSS

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