これはあまり目立たない問題ですが、IE ブラウザで中国語と英語のフォントが混在している場合、位置ずれが発生することがよくあります。
そこで再び疑問が生じますが、中国語と英語の乖離の原因は何でしょうか? ！解決策は何でしょうか？ ！したがって、テストの結果、2 つの状況が見つかりました (もちろん、原因となる状況は他にもある可能性があります。自分で試してみてください)。中国語と英語のオブジェクトの隣接する要素には、vertical-align 属性が設定されています (前の小さな図など)。一般に、画像やテキスト ボックス (その他のインライン ブロック要素) に対して垂直方向に整列する必要があります。これは、中国語と英語の位置ずれに影響します。
もう 1 つの状況は、親要素 (テーブルを除く) にvertical-align 属性が設定されている場合、内部の子要素の中国語と英語も位置がずれるということです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<頭>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>テスト</title>
<style type="text/css">
* {マージン:0;
html { 背景:#fff }
body { 位置:相対; フォント:12px/1.6em ヴェルダナ、ルシダ、エリアル、ヘルベチカ、サンセリフ;
</スタイル>
</head>
<本文>
<div style="vertical-align:middle;">
<a href="">いつも位置がずれてしまうのはなぜですか?なぜ??</a>
</div>
</body>
</html>
この問題を解決するにはどうすればよいでしょうか? ！
まず最初の 1 つについて説明します。これは、隣接する要素の垂直方向の中央によって引き起こされる位置ずれの問題の解決策です
。調査を通じて、中国語と英語のオブジェクトにzoom:1 を追加して、その haslayout をトリガーすることが判明しました。レイアウトがあり、中国語と英語のオブジェクトがずれることはありません。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<頭>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>テスト</title>
<style type="text/css">
* {マージン:0;
html { 背景:#fff }
body { 位置:相対; フォント:12px/1.6em ヴェルダナ、ルシダ、エリアル、ヘルベチカ、サンセリフ;
</スタイル>
</head>
<本文>
<div>
<a href="" style="zoom:1;">いつも位置がずれてしまうのはなぜですか?なぜ??</a>
</div>
</body>
</html>
2 番目のケースは、親要素のvertical-middle によって引き起こされる位置ずれの問題の解決策です。
この問題を解決するには、vertical-align:baseline という文を中国語と英語のオブジェクトに追加します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<頭>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>テスト</title>
<style type="text/css">
* {マージン:0;
html { 背景:#fff }
body { 位置:相対; フォント:12px/1.6em ヴェルダナ、ルシダ、エリアル、ヘルベチカ、サンセリフ;
</スタイル>
</head>
<本文>
<div style="vertical-align:middle;">
<a href="" style="vertical-align:baseline;">いつも位置がずれているのはなぜですか?なぜ??</a>
</div>
</body>
</html>
ただし、この時点では、下線がきつすぎるように見えるため、hasLayout をトリガーする必要があります。 。
<a href="" style="zoom:1;"vertical-align:baseline;">なぜいつも位置がずれているのですか?なぜですか??</a>
中国語と英語がずれている他の状況に遭遇した場合 この場合、もちろん、上記の 2 つの方法を試して問題を解決することもできます。最も安全で効果的な方法は、中国語と英語の両方で Songdynasty を使用することです。