2012-04-04 4 views
9

Wie ich im Titel erwähnt, wenn CSS font-Familie, benutzerdefinierte Schriftart (Schriftart-Gesicht), es vermasselt (schwarzer Hintergrund, schwarzer Text (ich denke)) auto complete Dropdown-Liste in Opera.Schrift-Gesicht, vermasselt Autocomplete-Dropdown-Liste in Opera Browser

input[type='text'], input[type='password'], input[type='email'], input[placeholder] { 
    font-size: 1.2em; 
    font-family: sans-serif; 
    color: #2A873A; 
    padding-left: 25px; 
} 

Code oben funktioniert gut, aber wenn ich "font-family: sans-serif;" Mit einigen Font-Face-Schriften (Google Web-Fonts auch), dann beginnt das Problem.

Hier ist der Screenshot von "Bug" in Aktion.

enter image description here

P. S. Ich sollte erwähnen, dass das ist Opera native Autocomplete, nicht benutzerdefinierte js, Dropdown-Liste.

EDIT: http://jsfiddle.net/burCR/

+1

Es ist schwer, das Problem zu sehen, die Geige ist nur ein Eingabefeld. Müssen Sie den Rest der Seite sehen & CSS. – Undefined

+0

@Julien Etienne Ich verstehe nicht, was du meinst? Das Problem ist sogar auf dem einen Eingabeelement sichtbar (im Beispiel jsfiddle). Zumindest auf Win7 64x, v11.62 und 12 alpha. Jedenfalls habe ich den Fehler dem Opera-Team gemeldet. –

+0

Ich weiß, dass dies in einigen anderen Browsern wie Coda passiert, aber es ist nur für bestimmte Eingabeformulare. Kannst du den Text hervorheben? Vielleicht Hintergrundfarbe: weiß; ? – Luke

Antwort

1

Haben Sie versucht, die Schrift direkt in Ihrem CSS-Angabe? zum Beispiel:

div.magicsomething {font-family:CustomFont,Customfont2,sans-serif;} 

Beachten Sie verschachtelte Elemente mit benutzerdefinierten Schriftart nicht weiterkommen, wenn Sie also die oben nicht tun, können Sie sehr gut auch font-family:inherit in Ihrem verschachtelten Elemente 'benötigen.

Für zusätzliche Hilfe, geben Sie bitte den Namen des benutzerdefinierten Schriftart, Ihre vollständigen CSS und einen Live-Link zu Ihrer Website

1

Obwohl dies offensichtlich etwas sein kann, stellen Sie sicher, dass Ihre Schrift mit Opera kompatibel ist. Hier ist eine Liste einiger websicherer Schriftarten.

http://www.w3schools.com/cssref/css_websafe_fonts.asp

Und wenn das nicht funktioniert, versuchen Sie die Schrift nehmen Sie aus Microsoft Word und verwenden möchten @fontface Sie benutzerdefinierte Schriftart anstelle der Verwendung eines websafe ein einzufügen.

Und schließlich versuchen Sie, Ihre Schriftart-Familie auf dem Formular zu verwenden und den Eingang erben die Schriftart. Hoffentlich hat das geholfen.

1

Dito, um die Schriftart direkt anzugeben. Vielleicht möchten Sie auch die base64-Kodierung ausprobieren, die meiner Erfahrung nach wunderbar funktioniert und eine hervorragende Cross-Browser-Kompatibilität bietet.

1

Sie können Farben für den Hintergrund und den Text einzeln festlegen.

input { 
    background-color: white; 
    color: black; 
    font-family: "My Fontface Font", Verdana, ms serif; 
}