Font-Größe für Button und Link-

ich diese einfache HTML versucht:Font-Größe für Button und Link-

TEST FONT SIZE</br> 
<input type="button" value="test bytton" style="font-size:20px"> 
<a style="font-size:20px">test link</a>

und fand heraus, dass die Schriftgröße dieser Taste größer aussieht als die Schriftgröße der Verbindung trotz Stil. Weiß jemand, warum Stil für Link und für Button anders funktioniert und wie man sie gleich aussehen lässt?

Quelle

2009-09-30 Kate

Die Schriftgröße ist gleich. Aber es sieht anders aus, weil die Standardschriftart von der Standard-Eingabefeldschriftart abweicht. Setzen Sie die font-family auf beide Elemente gleich und sie werden gleich aussehen.

ich in der Regel:

body, input, button, select, option, textarea { 
    font-family: ...; /* whatever font */ 
} 
body { 
    font-size: x%; /* whatever base font size I want */ 
} 
input, button, select, option, textarea { 
    font-size: 100%; 
}

konsistente Fonts über die Seite und Formularfelder zu erhalten.

Quelle

2009-09-30 09:38:11 bobince

Ich setze die gleiche Schriftart-Familie für Link und Button und bekomme das gleiche Ergebnis. Der Text innerhalb der Schaltfläche und der Link haben unterschiedliche Größen. – Kate

Funktioniert für mich, in jedem Browser. Veröffentlichen Sie Ihren genauen Testfall, der nicht funktioniert? – bobince

Gut, ich brauchte das auch, es funktioniert ... Danke bobince – Ljubisa

-4

Sie sollten nicht viel CSS für Schaltflächen verwenden, da ihre Anzeige vom Betriebssystem des Benutzers abhängt.

Stattdessen können Sie zum Beispiel Bilder verwenden.

Quelle

2009-09-30 09:14:10 brainfck

Die Verwendung von Bildern ist nicht universell. – Kate

Sieht mir gleich, getestet auf Firefox, IE6 und Chrome: http://jsbin.com/oveze
Bitte denken Sie daran:

Dies ist abhängig vom Browser und seine Standardwerten, und auch auf dem Betrieb je verschieden sein kann System.
Sehr oft gibt es eine andere Schriftart für Schaltflächen und Eingabefelder. Stellen Sie es auch ein.
Anti-Aliasing oder ClearType kann einen kleinen Unterschied verursachen, wenn Sie nicht die gleichen Farben (Hintergrund und Schriftart) haben.

Quelle

2009-09-30 09:39:06 Kobi

In Firefox, Google Chrome und Safari Schriftart von Button und Link sieht wirklich gleich aus, aber in IE (7+) und Opera nicht! Soweit es viele Probleme mit Styling-Schriftart für Button gibt, entscheide ich mich, Button mit Link zu ersetzen. Vielen Dank für die Antworten. – Kate

Wenn Sie sich so sehr für das Styling interessieren, wird Ihnen ein '' Link mehr Freiheit als eine Taste geben. Aber es wird sich nicht genau so verhalten ... – Kobi

Hatte das gleiche Problem in Chrome, herausgefunden später, dass wichtige Ursache

body { 
    -webkit-font-smoothing: antialiased 
}

ändert dies

body { 
    -webkit-font-smoothing: subpixel-antialiased; 
}

es fixiert war.

Quelle

2013-06-20 23:37:12 Ish

Danke, ich hatte ein ähnliches Problem (der Link verwendete die 'antialiased' Einstellung, wobei mein' 'tag' '' '' '' '' '' '' '' '' '' '' '' verwendete). – MaxGabriel

Font-Größe für Button und Link-

Antwort

Verwandte Themen