10

作成中の Web サイトで IE8 で日本語の文字を揃えるのに問題があります。

のようなものがあり<span>Label</span><span>Some value</span>ます。「Label」と「Some value」の両方が日本語または英語の場合は問題なく一致しますが、それらが混在している場合 (「Label」は常に日本語ですが、「Some value」はそうではない可能性があります)、整列がずれます。以下の画像の例:

ここに画像の説明を入力

驚き、驚き、それはすべて他のブラウザーで正常に動作します。たとえば、Chrome の同じ画像:

Chrome での例

これを修正する方法がわかりません。誰かがこれに遭遇したことがありますか、それに対する回避策を知っていますか? 私の会社はまだIE7をほとんど使用しているので、それでうまくいくいくつかのトリックが最も役に立ちます。

編集 1: 現在使用している css を追加するのを忘れていました。私が持っているラベルについて：

display: inline-block;
color: Gray;
vertical-align: text-top;

/*For IE7*/
zoom: 1;
*display: inline;

値については、似たようなものを使用しています：

display: inline-block;
margin: 0x 0px 0px 0px;
padding: 0px 0px 0px 0px;
vertical-align: text-top;

/*For IE7*/
zoom: 1;
*display: inline;

EDIT 2:これはこの問題に関連していると確信しています。フォームに入力ボックスがあり、日本語の文字を入力するまで完全に配置されています。ローマ字でも全く問題ありません。下記参照：

ここに画像の説明を入力

繰り返しますが、他のブラウザではまったく問題ありません...

編集3：

今日もこれを見ました（この質問をしてから1年以上...）。IE9 では、文字は Chrome や他のブラウザと同じように表示され、基本的にローマ字と日本語の単語がすべて正しく並んで表示されます。IETester を使用して確認したところ、同じページで、IE8 では IE9 よりも日本語フォントが「上」に配置されています。

IE8 の場合:

IE8では

IE9 の場合:

IE9 で

私はIE9を持っていなかったので、当時はこれをチェックすることができませんでした. フォントは同じに見えるので、IE の問題である必要があり、それについてできることは何もないと思いますか?

4

4 に答える 4

1

vertical-alignテキストボックスにも を割り当てていることを確認してください。

http://jsfiddle.net/HkrJH/

スパンのトラブルに関しては、再現できません。どのフォントを使用していますか? 問題を示すjsfiddleを投稿できますか?

于 2012-04-03T17:02:16.940 に答える
0

インターネットエクスプローラーは恐ろしいです。

ブラウザをターゲットにして、スタイルシートを追加してください。

頭の中の例:

<!--[if IE 6]><link rel="stylesheet" href="http://mysite.com/path/to/ie6.css" type="text/css" media="screen, projection"><![endif]-->

<!--[if IE 7]><link rel="stylesheet" href="http://mysite.com/path/to/ie7.css" type="text/css" media="screen, projection"><![endif]-->
于 2011-08-29T00:26:40.490 に答える
0

Web ページの HEAD 要素に次の HTML タグを配置できます。

<meta http-equiv=“X-UA-Compatible” content=“IE=7” />
于 2012-04-03T16:27:31.393 に答える
0

これは、日本語と英語で使用されるデフォルトのフォントに問題がある可能性があると思います。英語の文字は、日本語ではすべての文字が正方形のボックスであるのに対し、英語では "c" (正方形)、"t" (高い)、"g" (深い) などの文字に対応する必要があるため、日本語よりも多くの空白が含まれます。そのため、同じピクセル サイズの文字を使用する場合でも、どちらの言語でも使用されるフォントによっては、英語の文字が日本語の文字と異なって見えることがあります (同じではないか、同じであっても一致しない可能性があります)。使用vertical-align: middle; すれば、より良い結果が得られるはずです。

于 2012-04-06T13:44:11.150 に答える