Firefox/Safari wysokość ustawiania jako [określonej wysokości - dopełnienie - granica] dla wejścia [type = link]

Kiedy użyć następującego CSS:Firefox/Safari wysokość ustawiania jako [określonej wysokości - dopełnienie - granica] dla wejścia [type = link]

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

z tym HTML:

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

I spodziewać się tego, więc całkowita wysokość staje 36px:

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

Ale zamiast zarówno Firefox 3.6 i Safari 4 sh OW to: (nie testowałem w innych przeglądarkach)

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

Czy ktoś ma jakiś pomysł, dlaczego tak się dzieje?

(nawet jeśli jest to normalne zachowanie, jaka jest logika za tym stoi?)

Źródło

2010-02-14 Douwe Maan

Zdjęcie link uszkodzony (wykorzystanie Imgur!) –

elementy Formularz tradycyjnie miał width/height który zawiera obicia/granicy, ponieważ zostały pierwotnie wprowadzone przez przeglądarki jako OS-natywne widżety UI, gdzie CSS nie miały wpływu na dekoracje.

Aby odtworzyć ten problem, Firefox i inni czynią niektóre pola formularza (Wybierz, przycisk wejścia typu przycisku /) ze stylem CSS3 box-sizing ustawiony border-box, tak, że nieruchomość width odzwierciedla całą świadczonych szerokość terenu, w tym granicy i dopełnienie.

Można wyłączyć to zachowanie z: (. Lub, co jest bardziej powszechne dla ciekłych układów formularz, w którym chcesz używać „100%” szerokość, można ustawić innym border-box)

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

Muszą być dostępne wersje z prefiksem -browser do przechwytywania przeglądarek, które zaimplementowały to przed procesem standaryzacji. Będzie to jednak nieskuteczne w IE6-7.

Źródło

2010-02-14 11:22:35 bobince

Wielkie dzięki! Działa jak urok –

świetnie! nie wiedziałem, dzięki. – Sinan

Chciałbym zagłosować na to więcej niż raz, gdyby było to możliwe. –

kilka rzeczy można spróbować:

Ustaw doctype dokumentu (<!DOCTYPE html>)
Ustawić wejście być display:block lub display: inline-block
Użyj reset stylesheet.

Źródło

2010-02-14 11:18:23 Marius

już próbował te opcje, nie działa. –

Zmiana DOCTYPE z HTML4 Przejściowy na HTML5 pracował dla mnie. – TataBlack

Ma to sens, ponieważ wysokość elementu jest naturalnie większa niż ustawiona. elementom wejściowym przypisana jest wysokość, która w tym przypadku powinna wystarczyć do umieszczenia tekstu elementu, ale zostanie ustawiona na mniejszą. Aby to pokazać, usuń ustawienie wysokości.

Źródło

2010-02-14 11:25:07 Rob

Pozostałe elementy działają tak jak powiedziałem: Całkowita wysokość to "border-top + padding-top + height + padding-bottom + border-bottom". –

Mam to działa, usuwając dopełnienie przycisku wprowadzania i ustawianie wysokości około 20. Następnie dostosowuję wysokość, wypełnienie elementu kotwiącego. I Ustaw również wysokość linii, rozmiar czcionki i rodzinę czcionek.

pracował na FF, IE, Safari i Chrome: D

Źródło

2010-09-30 11:07:44 Rahatur

Firefox/Safari wysokość ustawiania jako [określonej wysokości - dopełnienie - granica] dla wejścia [type = link]

Odpowiedz

Powiązane problemy