Firefox/Safari regolazione altezza [specificato altezza - padding - confine] per l'ingresso [tipo di pulsante =]

Quando uso il seguente CSS:Firefox/Safari regolazione altezza [specificato altezza - padding - confine] per l'ingresso [tipo di pulsante =]

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

con questo HTML:

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

I si aspettano di vedere questo, quindi l'altezza totale diventa 36px:

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

Ma invece sia Firefox 3.6 e Safari 4 sh ow questo: (non ho ancora testato in altri browser)

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

Qualcuno ha qualche idea del perché questo accade?

(anche se è un comportamento previsto, qual è la logica dietro di esso?)

fonte

2010-02-14 Douwe Maan

Immagine rotto (uso imgur!) –

elementi Form hanno tradizionalmente avuto un width/height che include il loro padding/bordo, perché sono stato inizialmente attuato con browser come widget UI del sistema operativo nativo, dove CSS aveva alcuna influenza sulle decorazioni.

Per riprodurre questo comportamento, Firefox e altri rendono alcuni campi del modulo (selezionare, tasto/ingresso di tipo pulsante) con lo stile CSS3 box-sizing impostato border-box, in modo che la proprietà width riflette l'intera larghezza dell'area reso compreso il bordo e imbottitura.

È possibile disattivare questo comportamento con: (. O, il che è più comune per i layout in forma liquida in cui si desidera utilizzare '100%' larghezza, è possibile impostare gli altri a border-box)

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

Le versioni con prefisso dei browser devono essere lì per rilevare i browser che l'hanno implementato prima che il processo di standardizzazione sia arrivato fino a quel momento. Questo sarà inefficace su IE6-7, però.

fonte

2010-02-14 11:22:35 bobince

Grazie mille! Funziona come un fascino –

fantastico! non lo sapevo, grazie. – Sinan

Vorrei votare più di una volta se fosse possibile. –

Un paio di cose si può provare:

Impostare la doctype del documento (<!DOCTYPE html>)
impostare l'ingresso per essere display:block o display: inline-block
Utilizzare un reset stylesheet.

fonte

2010-02-14 11:18:23 Marius

già provato queste opzioni, non ha funzionato. –

Cambiare il DOCTYPE da HTML4 Transitional a HTML5 ha funzionato per me. – TataBlack

Ha senso perché l'altezza dell'elemento è naturalmente più di ciò a cui l'hai impostata. agli elementi di input viene assegnata un'altezza che, in questo caso, dovrebbe essere sufficiente per contenere il testo del tuo elemento ma lo hai impostato su un valore inferiore. Per mostrare questo, rimuovi l'impostazione dell'altezza.

fonte

2010-02-14 11:25:07 Rob

Altri elementi funzionano come ho detto: L'altezza totale è 'border-top + padding-top + height + padding-bottom + border-bottom'. –

Ho funzionato rimuovendo il padding del pulsante di input e impostando un'altezza intorno a 20. quindi regolando l'altezza, imbottitura dell'elemento di ancoraggio. I Impostare anche l'altezza della linea, la dimensione del carattere e la famiglia di caratteri.

lavorato su FF, IE, Safari e Chrome: D Link

fonte

2010-09-30 11:07:44 Rahatur

Firefox/Safari regolazione altezza [specificato altezza - padding - confine] per l'ingresso [tipo di pulsante =]

risposta

Problemi correlati