Firefox/réglage en hauteur Safari [hauteur spécifiée - padding - frontière] pour l'entrée [type = bouton]

Lorsque j'utilise le CSS suivant:Firefox/réglage en hauteur Safari [hauteur spécifiée - padding - frontière] pour l'entrée [type = bouton]

input[type=button] { 
    background-color: white; 
    border: 1px solid black; 
    font-size: 15px; 
    height: 20px; 
    padding: 7px; 
}

avec ce HTML:

<input type="button" value="Foo" />

I attendre à voir, de sorte que la hauteur totale devient 36px:

1px border 
7px padding 
20px content (with 15px text) 
7px padding 
1px border

Mais au lieu à la fois Firefox 3.6 et Safari 4 sh OW ceci: (n'avez pas testé dans d'autres navigateurs)

Screenshot http://labs.spiqr.nl/upload/files/1223ef9cbae3ab6e43bd1f9215ebedb157ac7b22.png

1px border 
7px padding 
4px content (with 15px text) => height - 2 * border - 2 * padding 
7px padding 
1px border

Est-ce que quelqu'un a une idée pourquoi cela se produit?

(Même si elle est un comportement attendu, quelle est la logique derrière tout cela?)

Source

2010-02-14 Douwe Maan

lien brisé l'image (utilisez Imgur!) –

éléments de formulaire ont traditionnellement un width/height qui comprend leur rembourrage/frontière, parce qu'ils ont été initialement mis en œuvre par les navigateurs comme les widgets de l'interface utilisateur OS natif, où CSS avait aucune influence sur les décorations.

Pour reproduire ce problème, Firefox et d'autres rendent certains champs de formulaire (sélectionner, bouton/entrée de type bouton) avec le CSS3 box-sizing style défini à border-box, de sorte que la propriété width reflète toute la largeur de la zone rendue, y compris la frontière et rembourrage.

Vous pouvez désactiver ce comportement avec: (. Ou, ce qui est plus fréquent pour les mises en page sous forme liquide où vous souhaitez utiliser la largeur « 100% », vous pouvez définir les autres à border-box)

select, button { 
    box-sizing: content-box; 
    -moz-box-sizing: content-box; 
    -webkit-box-sizing: content-box; 
}

Les versions préfixées -browser doivent être là pour attraper les navigateurs qui l'ont implémenté avant que le processus de standardisation ne soit aussi avancé. Cela sera inefficace sur IE6-7, cependant.

Source

2010-02-14 11:22:35 bobince

Merci beaucoup! Fonctionne comme un charme –

génial! Je ne le savais pas, merci. – Sinan

Je voterais ceci plus d'une fois si c'était possible. –

Quelques choses que vous pouvez essayer:

Réglez le doctype du document (<!DOCTYPE html>)
Réglez l'entrée être display:block ou display: inline-block
Utilisez un reset stylesheet.

Source

2010-02-14 11:18:23 Marius

déjà essayé ces options, ne fonctionnait pas. –

Changer le DOCTYPE de HTML4 Transitional en HTML5 a fonctionné pour moi. – TataBlack

Cela a du sens car la hauteur de l'élément est naturellement supérieure à ce que vous avez défini. les éléments d'entrée ont une hauteur qui, dans ce cas, devrait être suffisante pour contenir le texte de votre élément mais vous le réglez sur une plus petite quantité. Pour le montrer, supprimez votre paramètre de hauteur.

Source

2010-02-14 11:25:07 Rob

D'autres éléments fonctionnent comme je l'ai dit: La hauteur totale est 'border-top + padding-top + hauteur + padding-bottom + border-bottom'. –

Je l'ai réussi en enlevant le rembourrage du bouton d'entrée et en réglant une hauteur autour de 20. puis en ajustant la hauteur, le rembourrage de l'élément d'ancrage. I Définit également la hauteur de ligne, la taille de police et la famille de polices.

travaillé sur FF, IE, Safari et Chrome: D

Source

2010-09-30 11:07:44 Rahatur

Firefox/réglage en hauteur Safari [hauteur spécifiée - padding - frontière] pour l'entrée [type = bouton]

Répondre

Questions connexes