html - Meiryo フォントを使用すると入力フィールドが伸びる

Question

私は日本のウェブサイトで「メイリオ」と呼ばれる有名な日本のフォントを使用しています。ただし、このフォントを使用すると、すべての入力フィールドが伸びてしまいます。これは非常に奇妙なバグです。フォントを別のものに置き換えると、すべての入力フィールドが正常に戻ります。

このバグが発生する理由を説明できる人はいますか?

すべての主要ブラウザでテスト済み

Answer 1

バグではありません。要素の<input type=text>表示サイズはsize属性によって設定され (デフォルトは 20)、幅は「文字数」で設定されます。これは、HTML 4 によると「平均幅」の文字を意味しますが、HTML5 ドラフトでは、「ユーザー エージェントは、少なくともその数の文字が表示されるようにする必要があります」と述べています。現実はブラウザによって異なります。いずれにせよ、要素の表示幅は、フォントのプロパティ (フォント内のグリフの幅) に依存する必要があり、実際には依存します。

次の簡単なテスト (いくつかの一般的なデフォルト フォントが に使用されることを前提としていますinput) は、これを示しています。

<input value="Hello world"><br>
<input value="Hello world" style="font-family: Meiryo">

後者の要素はかなり幅が広く、最初のテキスト セットの外観を見ると、その理由がわかります。Meiryo では、通常、デフォルトinputフォントとして一般的に使用されるフォントよりも文字 (グリフ) の幅が広くなっています。

結論は、ページのデザインとレイアウトによって異なります。柔軟な設計では、レイアウトの詳細がデータとフォントの要件に適合しますが、その逆ではありません。デザインがより厳格な場合は、CSS で幅の上限を設定することを検討してください。本当に必要な場合はピクセルを使用しますmax-width: 200px。

Answer 2

it's font issue

use CSS width and height property to solve the problem