Lokalisierung bricht die Höhe der Tasten

In einem Projekt zur Lokalisierung einer Webanwendung erkennen wir, dass, da Browser verschiedene Schriftarten für verschiedene Sprachen verwenden (z. B. Englisch und Japanisch oder sogar zwei verschiedene japanische Texte, je nachdem welche Glyphen verwendet werden), die Höhe von einigen HTML-Objekten ändert sich, am offensichtlichsten mit Eingabeknöpfen. Obwohl dies verständlich ist, welchen Ansatz würden Sie verwenden, um dies zu beheben? Der einzige Weg, den ich gefunden habe (was ich nicht wirklich tun möchte, da es die Idee des responsiven Designs unterbricht), ist die vertikale Ausrichtung nach oben und die Höhe auf eine feste Pixelhöhe.Lokalisierung bricht die Höhe der Tasten

Um zu sehen, was ich meine, können Sie [diese Geige] [1] in Chrome sehen, die Tasten werden unterschiedliche Höhe haben. In Firefox wird die Höhe gleich sein. Der Grund dafür ist, dass die beiden Japenese Texte mit verschiedenen Schriftarten (Yu Gothic und Simsun machen wird, je nachdem, welche Glyphen verwendet werden

Irgendwelche Ideen bitte

[1]: https://jsfiddle.net/sxg78tom/3/

Quelle

2017-12-11 J Johansson

einige Dinge ausprobiert, aber nichts für mich funktioniert auch - Sie haben versucht, einige japaneese/chineese Schriftarten zu finden, wenn Sie also gleiche Schriftart in allen Browsern zu erklären, in der Theorie sollten sie sein das gleiche und als Sie können Dinge auf Tasten ändern ... ODER, wenn Sie nicht enthaltene Schriftarten verwenden möchten, können Sie Klassen zu Japaneese/chineese Schaltflächen hinzufügen und ändern Sie dann die Höhe durch Hinzufügen von Padding zu einem der Schaltflächen. Sie können dies auch für einen bestimmten Browser, z. '@media Bildschirm und (-webkit-min-device-pixel-ratio: 0) { # hej2 {padding: 5px;} }' für chrome – Zorak

@ Zorak Es ist nichts kompliziert, nur machen sie flexibel buchstäblich :) –

@ Highdef Ich habe deine Lösung gesehen und ich gebe zu, dass es besser ist. Jedoch ohne weitere Details, wissen wir nicht, ob die Eingänge in zusätzlichen div sein können. wenn nicht, kann dieses Problem etwas komplizierter werden :) Ich habe die genaue Struktur verfolgt. – Zorak

Sie davon Gebrauch machen können.?: Fiddle: https://jsfiddle.net/3u1wahy9/

Ihre input elements (in this case the buttons) in einem div Wrap, die die CSS-Stil inline-flex hat, wird dies alle machen die Elemente flexibel dh macht sie Erhalten Sie die gleiche Höhe. Hoffe das hilft.

div{ 
 
    display:inline-flex; 
 
}

<div> 
 
<input id="hej" type="submit" value="ファイルの" style="vertical-align:top;font-size:1em;"/> 
 
<input id="hej2" type="submit" value="選択" style="vertical-align:top;font-size:1em;" /> 
 
</div>

Quelle

2017-12-11 16:47:27

@JJohansson Kein Problem :) –

Lokalisierung bricht die Höhe der Tasten

Antwort

Verwandte Themen