CSS est la largeur comprennent le remplissage ?

Question

Il semble que sous IE, la largeur comprend la taille de remplissage. tandis que dans FF, la largeur ne fonctionne pas. Comment puis-je faire les deux le même comportement ?

Merci.

Answer 1

• IE l'habitude d'utiliser le plus-pratique-mais-non-standard "border-box" modèle de boîte. Dans ce modèle, la largeur d'un élément inclut le rembourrage et les frontières. Par exemple:
  #foo { width:10em; padding:2em; border:1em }
  serait 10em de large.

• En revanche, toutes les normes craignant les navigateurs par défaut pour le "content-box" modèle de boîte. Dans ce modèle, la largeur d'un élément à ne pas inclure rembourrage ou des frontières. Par exemple:
  #foo { width:10em; padding:2em; border:1em }
  sera réellement 16em large: 10em + 2em de remplissage pour chaque côté, + 1em de bordure pour chaque côté.

Si vous utilisez une version moderne de l'IE avec des balises valides, un bon doctype, et les en-têtes appropriés , il va se conformer à la norme. Sinon, vous pouvez forcer moderne conforme aux normes les navigateurs à utiliser "border-box" via:

* {
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box
}

La première déclaration est nécessaire pour l'Opéra, le deuxième est pour Firefox, le troisième est pour Webkit et Chrome.

Voici un simple test, j'ai fait il y a des années pour le test de ce box-sizing déclaration de votre navigateur prend en charge: http://phrogz.net/CSS/boxsizing.html

Notez que Webkit (Safari et Chrome) ne prennent pas en charge l' padding-box modèle de boîte par l'intermédiaire de toute déclaration.

Answer 2

Une règle simple est d’essayer d’éviter d’utiliser la propriété padding/marge et la largeur pour le même élément. c'est-à-dire utiliser quelque chose de semblable à ceci

Answer 3

Je suis tombé sur cette question, et même si c'est un couple d'années, j'ai pensé que je pourrais ajouter ceci dans le cas où quelqu'un tombe sur ce fil.

CSS3 a maintenant une zone de la taille de la propriété. Si vous définir, par exemple, .bigbox { box-sizing:border-box; width: 1000px; border: 5px solid #333; padding: 10px; } votre classe sera 1000px de large, au lieu de 1030px. C'est, bien sûr, incroyablement utile pour toute personne qui utilise des pixels de la taille de la frontière avec le liquide de la vrd, parce qu'il résout un problème insoluble.

Encore mieux, box-sizing est pris en charge par tous les principaux navigateurs, sauf internet explorer 7 et ci-dessous. Pour inclure tous les éléments à l'intérieur de la largeur ou de la hauteur de la dimension, de définir box-sizing à border-box. Pour agréger d'autres éléments de la largeur et/ou hauteur, qui est la valeur par défaut, vous pouvez définir box-sizing "content-box".

Je ne suis pas sûr de l'état actuel de navigateur syntaxe, mais j'ai toujours inclure -moz et -webkit préfixes: .bigbox{ -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }

Answer 4

Vous devrez probablement activer mode conforme aux standards. Sans avoir vu un code, cependant, je ne peux vous donner aucune orientation plus que cela.

Answer 5

Vous avez un doctype déclaré ? Quand j’ai commencé le codage html j’ai eu ce problème, et c’est de ne pas avoir un doctype déclaré. Mon préféré est :