0

クロスブラウザーの文字間隔に大きな問題があり、特にサファリとクロームの異なるブラウザーでボックス/入力ボックスがオフになります。

写真が示すように、一方はくしゃくしゃになっていますが、もう一方は正常に見えます。誰にもこれに対する修正がありますか？

文字間隔の例

font-family: 'Arial Narrow', Arial, sans-serif;
font-size:13px;
4

1 に答える 1

0

この質問をした理由は、次のようなサイトを持っていたからです。

<div style="width:300px">Text: <input width="260px" /></div>

そのため、さまざまなブラウザでテキストが数ピクセル長くなり、入力ボックスの長さの終わりがずれていました。

ブラウザーが異なれば必然的に一部のフォントのレンダリングがわずかに異なり、文字間隔を回避する方法がないことに気が付きました。

したがって、入力ボックスが一致するように文字間隔を変更する代わりに、入力ボックスがピクセル長ではなくパーセントで内部にある div の残りのスペースを埋めるようにしました。このように、各入力ボックスはすべてのブラウザで同じ時点で終了し、最終的に一致しました。

助けてくれてありがとう。

私がそれをした方法：

HTML:

<div style="width:300px">
  <label>Text:</label>
  <span><input /></span>
</div>

CSS:

label { float: left; }
span { display: block; overflow: hidden; }
input { width: 100%; }
于 2013-10-24T05:34:59.777 に答える