<button> padding / largeur problème

Je suis en utilisant <button> à faire un post de demande dans un formulaire. J'ai aussi un style a.button exactement comme le <button> (j'ai besoin de la a.button de faire quelques JS trucs).

Le bouton a du rembourrage, une hauteur fixe. Quand je ne spécifiez la largeur du bouton /une ils ont tous les deux le même aspect. Mais quand j'ai ajouter la largeur de la <button> il ignore le rembourrage.

Je vais avoir ce problème dans Chrome, Firefox et Opera, donc je suppose que ce n'est pas un rendu faute. Aussi le même problème avec <input type="submit" />

Voici le CSS de base:

.button, button {
    margin: 0;
    display: inline-block;
    border: 0;
    text-decoration: none;
    cursor: pointer;
    color: black;
    background: #ddd;
    font: 12px Verdana;
    padding: 40px; /* 40px, so you can see that it won't be rendered with width */
    text-align: center;
}

Le code HTML:

<a href="#" class="button">Some text</a>
<button>Some text</button>
<!-- Works fine till here -->
<br /><br />
<a href="#" class="button" style="width:200px">Some text</a>
<button style="width:200px">Some text</button>

Violon: http://jsfiddle.net/9dtnz/

Des suggestions pourquoi les navigateurs sont en ignorant le rembourrage? (en haut et en bas lors de l'utilisation de hauteur à gauche et à droite lors de l'utilisation de la largeur).

Cela a l'air bien pour moi dans FF 5.0
Il n'est pas dans Chrome 12 et FF4
son travail, qui est la version de navigateur que vous utilisez?
Les deux derniers boutons ont la même outerWidth? Ils ne sont pas dans Chrome 12, FF 4 & Opera 10.5

OriginalL'auteur js-coder | 2011-07-22

  1. 21

    Très bizarre, j'ai vu mon google Chrome dispose d'une box-sizing: border-box; règle pour les éléments d'entrée, de sorte que le remplissage est compris dans la largeur...

    Donc pour éviter qu'il suffit de spécifier box-sizing: content-box; (certains préfixe peut être nécessaire).

    Merci beaucoup! Cela résout le problème. -webkit-box-sizing: initial fait la job
    J'ai fait un peu de recherche et initiale ne semble pas fonctionner dans Opera & FF. Ce n': [préfixe]-box-sizing: content-box;
    yup, j'ai juste testé sur chrome. Je pense que ça va être utile pour certaines personnes =)
    Merci! Fonctionne toujours.
    Encore vrai en 2018 pour Firefox et Chrome (à la fois reconnaître la norme box-sizing propriété sans préfixe maintenant). Je suis curieux de savoir POURQUOI les deux navigateurs utiliser une valeur par défaut différente box-sizing pour les éléments de formulaire. C'est plutôt contre-intuitif...

    OriginalL'auteur MatTheCat

  2. 1

    Il semble bien pour moi, donc ça peut être un style de la feuille de problème de conflit. Essayez d'utiliser !important de remplacer quoi que ce soit, et qui pourrait résoudre votre problème.

    .button, button {
    margin: 0;
    display: inline-block;
    border: 0;
    text-decoration: none;
    cursor: pointer;
    color: black;
    background: #ddd;
    font: 12px Verdana;
    padding: 40px!important; /* 40px, so you can see that it won't be rendered with width */
    text-align: center;
}

    Espère que cette aide.

    Michael.

    Nope, pas de différence avec !important. Voici une capture d'écran de ce que je vois: cl.ly/261Z1T2C2Z0F44471f2y . Les deux derniers boutons devraient ai le même outerWidth, mais ils ne le font pas.

    OriginalL'auteur Michael Giovanni Pumo