Comment définir la hauteur d'un bouton (input-élément) sur les navigateurs webkit?

Sur mon Mac avec webkit-navigateurs (Safari et Chrome, version actuelle), je ne peux pas régler la hauteur de l'entrée de l'élément.

<input type="button" style="height:200px;" value="Hello World!">​

ne fonctionne pas.

jQuerys $('input').css('height','200px');​ ne fonctionne pas, soit.

http://jsfiddle.net/XmS6m/

Si le réglage de la largeur est possible, soit avec style-attribut ou avec jQuery.

Quelle est la raison de cette incohérence? Et qu'est ce qu'une solution possible?

Sur Win 7 versions de Safari et de Chrome, la hauteur prend effet lorsqu'elle est définie dans le CSS (à l'aide de la jsfiddle; pur CSS est assez, et donc, si le jQuery, le code lui-même). Donc cela peut être un Mac spécialité (peut-être qu'il a une valeur par défaut pour -webkit-appearance pour le bouton?), ou peut-être même une installation spécifique de la question.

OriginalL'auteur MI5 | 2012-06-11

  1. 13

    Display inline-block ne fait rien, comme des entrées déjà que l'affichage par défaut du jeu. Ajouter border:none. Lorsque vous le faites, il commence à se comporter comme vous le souhaitez. Voici le violon -> http://jsfiddle.net/joplomacedo/XmS6m/1/

    ou ajouter selon la bordure que vous voulez.
    C'est une bonne astuce, merci! Je suis nouveau sur CSS et avez été la recherche d'une solution à cela un certain temps. Ce n'border:none accomplir?
    argh! avec border:none il ne fait pas ressembler à un bouton! @JOPLOmacedo Comment puis-je ajouter une bordure qui ressemble le bouton par défaut de l'apparence?
    Au lieu d'un <input type= "bouton" />, vous pouvez utiliser un élément de bouton <button></button>, ce qui vous permet de changer la hauteur, sans nécessiter de modifications à la frontière de la propriété. Si vous êtes intéressé par la différence entre les deux éléments (pas beaucoup), voici un lien: stackoverflow.com/questions/469059/...

    OriginalL'auteur banzomaikaka

  2. 2

    Bouton d'insertion de l'élément de niveau. Vous avez besoin de changer que de block ou inline-block:

    #my_button { display: inline-block; height: 200px; }

    Live Exemple

    Cela ne résout pas le problème pour moi. En tout cas merci pour votre effort.
    Comment est-il pas de résoudre votre problème? Qu'avez-vous? Est-ce que mon exemple, le travail pour vous? Merci de ne pas juste laisser des commentaires tels que "ça ne marche pas" sans expliquer!
    Sur mon Mac votre "Live" exemple de ne pas régler la hauteur de la <input type="button">. Seul celui de la <button>. Testé avec Safari 5.1.7 et Chrome 19.
    Sur mon Mac, le bouton de gauche est plus haute. Le bouton de droite montre pas de changement de hauteur.

    OriginalL'auteur Madara Uchiha

  3. 0

    Vous pouvez également augmenter la taille de police du bouton pour l'agrandir.

    Eu à le faire parce que inline-block ne fonctionnait pas dans le tableau

    OriginalL'auteur Rusty