ホームページ > 記事 > ウェブフロントエンド > IE での中国語および英語フォントの下線の配置に関する問題
しかし、テストの結果、デフォルトでリンクがページに直接設定されている場合には、この状況は発生しません。
コード
<!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"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>php中文网</title> <style type="text/css"> * { margin:0; padding:0; } html { background:#fff; } body { position:relative; font:12px/1.6em Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; color:#333; } </style> </head> <body> <div> <a href="http://www.php.cn" id="aa" title="php中文网"><img src="http://i.mtime.cn/20080731114455/images/logo_main.png" style="vertical-align:middle;" alt="php中文网" /> </a> <a href="">为什么我老是对不齐呢?why??</a> </div> </body> </html>
そこでまた疑問が生じますが、中国語と英語の乖離の原因は何でしょうか? !解決策は何でしょうか? !したがって、テストの結果、2 つの状況が見つかりました (もちろん、原因となる状況は他にもある可能性があります。自分で試してみてください)。中国語と英語のオブジェクトの隣接する要素には、vertical-align 属性が設定されています (前の小さな図など)。一般に、画像やテキスト ボックス (その他のインライン ブロック要素) に対して垂直方向に整列する必要があります。これは、中国語と英語の位置ずれに影響します。
もう一つの状況は、親要素(テーブルを除く)に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"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>php中文网</title> <style type="text/css"> * { margin:0; padding:0; } html { background:#fff; } body { position:relative; font:12px/1.6em Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; color:#333; } </style> </head> <body> <div style="vertical-align:middle;"> <a href="http://www.php.cn" id="aa" title="php中文网"><img src="http://i.mtime.cn/20080731114455/images/logo_main.png" alt="php中文网" /></a> <a href="">为什么我老是对不齐呢?why??</a> </div> </body> </html> |
まずは 1 つ目について説明します。これは、隣接する要素の垂直方向の中央によって引き起こされる位置ずれの問題の解決策です。 中国語と英語のオブジェクトにzoom:1 を追加して、その haslayout をトリガーします。調査により、次のことが判明しました。 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"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>php中文网</title> <style type="text/css"> * { margin:0; padding:0; } html { background:#fff; } body { position:relative; font:12px/1.6em Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; color:#333; } </style> </head> <body> <div> <a href="http://www.php.cn" id="aa" title="php中文网"> <img src="http://i.mtime.cn/20080731114455/images/logo_main.png" style="max-width:90%" alt="php中文网" /></a> <a href="" style="zoom:1;">为什么我老是对不齐呢?why??</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"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>php中文网</title> <style type="text/css"> * { margin:0; padding:0; } html { background:#fff; } body { position:relative; font:12px/1.6em Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; color:#333; } </style> </head> <body> <div style="vertical-align:middle;"> <a href="http://www.php.cn" id="aa" title="php中文网"><img src="http://i.mtime.cn/20080731114455/images/logo_main.png" alt="php中文网" /></a> <a href="" style="vertical-align:baseline;">为什么我老是对不齐呢?why??</a> </div> </body> </html> |
コードボックス
<!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"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>php中文网</title> <style type="text/css"> * { margin:0; padding:0; } html { background:#fff; } body { position:relative; font:12px/1.6em Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; color:#333; } </style> </head> <body> <div style="vertical-align:middle;"> <a href="http://www.php.cn" id="aa" title="php中文网"><img src="http://i.mtime.cn/20080731114455/images/logo_main.png" alt="php中文网" /></a> <a href="" style="zoom:1; vertical-align:baseline;">为什么我老是对不齐呢?why??</a> </div> </body> </html> |
以上がIE での中国語および英語フォントの下線の配置に関する問題の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。