ホームページ ウェブフロントエンド htmlチュートリアル IE での中国語および英語フォントの下線の配置に関する問題

IE での中国語および英語フォントの下線の配置に関する問題

Aug 21, 2017 pm 12:01 PM
ie 下線

まず問題について説明します。図に示すように、IE でテキスト行に英語と中国語の両方が含まれる場合、リンクの下線が切れます。これは、現時点では中国語と英語が揃っていないことを意味します。 (FIREFOX はこの問題の影響を受けません)

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="/static/imghw/default1.png"  data-src="http://i.mtime.cn/20080731114455/images/logo_main.png"  class="lazy"   
   style="vertical-align:middle;" alt="php中文网" />
   </a> 
   <a href="">为什么我老是对不齐呢?why??</a> 
  </div>  
 </body>
</html>
ログイン後にコピー

IE での中国語および英語フォントの下線の配置に関する問題

そこでまた疑問が生じますが、中国語と英語の乖離の原因は何でしょうか? !解決策は何でしょうか? !したがって、テストの結果、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="/static/imghw/default1.png"  data-src="http://i.mtime.cn/20080731114455/images/logo_main.png"  class="lazy"   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="/static/imghw/default1.png"  data-src="http://i.mtime.cn/20080731114455/images/logo_main.png"  class="lazy"     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="/static/imghw/default1.png"  data-src="http://i.mtime.cn/20080731114455/images/logo_main.png"  class="lazy"   alt="php中文网" /></a> 
   <a href="" style="vertical-align:baseline;">为什么我老是对不齐呢?why??</a> 
  </div>  
 </body>
</html>
ログイン後にコピー

しかし、この時点では、下線を回避するには、hasLayout をトリガーするためにまだzoom:1; を追加する必要があることがわかります。ぴったりフィット!

コードボックス

<!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="/static/imghw/default1.png"  data-src="http://i.mtime.cn/20080731114455/images/logo_main.png"  class="lazy"   alt="php中文网" /></a> 
   <a href="" style="zoom:1; vertical-align:baseline;">为什么我老是对不齐呢?why??</a> 
  </div>  
 </body>
</html>
ログイン後にコピー

中国語と英語が一致しない他の状況に遭遇した場合は、上記の2つの方法を使用して解決することもできます。もちろん、最も安全で効果的なのは、中国語と英語の両方で Song フォントを使用することです。

以上がIE での中国語および英語フォントの下線の配置に関する問題の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

キーボードで下線を入力する方法?入力せずに下線だけを入力する方法? キーボードで下線を入力する方法?入力せずに下線だけを入力する方法? Feb 22, 2024 pm 07:46 PM

入力方法を英語に調整し、Shift キーとマイナス キーを押したままにします。チュートリアルの適用モデル: Lenovo AIO520C システム: Windows 10 Professional エディション: Microsoft Office Word 2022 分析 1 まず、入力方法の中国語と英語の入力を確認し、英語に調整します。 2 次に、キーボードの Shift キーとマイナス キーを同時に押します。 3 インターフェイスをチェックして、下線付きの単語を確認します。補足:Word文書に下線を素早く入力する方法 1. Wordで下線を入力する必要がある場合は、マウスでスペースを選択し、フォントメニューで入力する下線の種類を選択します。概要/注意事項: 続行する前に必ず入力方法を英語に変更してください。そうしないと、アンダースコアを正常に入力できません。

WPS ドキュメントの空白の下線が印刷できないのはなぜですか?どのように下線を引けばよいですか? WPS ドキュメントの空白の下線が印刷できないのはなぜですか?どのように下線を引けばよいですか? Mar 20, 2024 am 09:40 AM

Word でテキストを入力するとき、説明や強調のために一部の位置に下線を引く必要がある場合がありますが、WPS 文書内の空白の下線が印刷できないのはなぜでしょうか。アンダーラインはどのように引けばよいのでしょうか?以下で編集者が詳しく紹介しますので、見てみましょう。 WPS ドキュメントでは、図に示すように空白スペースに下線を引くことができます。どうやってするの?詳しい操作方法は以下をお読みください。図の文書を例として、空白スペースに下線を引く方法を示します。画像の「名前」のコロンの右側にカーソルを置き、キーボードのスペースバーを押します。デモンストレーションを容易にするために、以下に示すようにフォント サイズを大きくしています。カーソルが設定位置に到達したら、放さずにクリックしたままにして、図に示すように左側のコロンの横にドラッグします。 3. 次に、図の矢印で示されている「下線」アイコンをクリックします。絵。

CSSで下線を削除する方法 CSSで下線を削除する方法 Jan 28, 2023 pm 03:07 PM

css aで下線を解除する方法: 1. HTMLサンプルファイルを作成する; 2. aタグを本文に追加する; 3. 指定したaに「#none{text-decoration: none;}」を追加して下線を解除する鬼ごっこ。

Excelで下線を入力する方法 Excelで下線を入力する方法 Mar 20, 2024 am 08:37 AM

社会の発展に伴い、テクノロジーも急速に発展し、オフィスには電子機器が標準装備されています。現在、オフィスソフトにはさまざまな種類があります。オフィスソフトの中でもExcelは今でもよく使われています。設定を表で行うこともあります。 . これらのコンテンツを強調するために、異なる色のフォントを選択したり、フォントを濃くしたり、強調するために下線を引いたりします。フォントの設定は簡単ですが、誰もが下線の追加方法を知っているわけではありません。編集者今日は初心者の友達に教えますエクセルで下線を引く方法。 1. Excel を開いて、下の図に示すように、いくつかの単語を入力します。 2. 以下の図に示すように、テキストを選択し、右クリックして「セルの書式設定」オプションを選択します。 3. 「単一の下線」を見つけて、

Internet Explorer で Edge が開く: MS Edge リダイレクトを停止する方法 Internet Explorer で Edge が開く: MS Edge リダイレクトを停止する方法 Apr 14, 2023 pm 06:13 PM

Internet Explorer が長い間人気がなくなってきたことは周知の事実ですが、Windows 11 の登場により現実が始まりました。 Edge は、将来的に IE を置き換えるのではなく、現在 Microsoft の最新オペレーティング システムのデフォルトのブラウザーとなっています。現時点では、引き続き Windows 11 で Internet Explorer を有効にすることができます。ただし、IE11 (最新バージョン) の正式な廃止日は 2022 年 6 月 15 日であり、時間は刻々と過ぎています。これを念頭に置くと、Internet Explorer が Edge を開くことがありますが、それが気に入らないことに気づいたかもしれません。では、なぜこのようなことが起こっているのでしょうか?存在する

win11でie11ブラウザが使えない場合はどうすればいいですか? (win11ではIEブラウザは使用できません) win11でie11ブラウザが使えない場合はどうすればいいですか? (win11ではIEブラウザは使用できません) Feb 10, 2024 am 10:30 AM

ますます多くのユーザーが win11 システムにアップグレードし始めています。各ユーザーの使用習慣が異なるため、多くのユーザーは依然として ie11 ブラウザーを使用しています。では、win11 システムで ie ブラウザーを使用できない場合はどうすればよいでしょうか? Windows11はIE11をまだサポートしていますか?解決策を見てみましょう。 win11でie11ブラウザが使えない問題の解決策 1. まず、スタートメニューを右クリックし、「コマンドプロンプト(管理者)」を選択して開きます。 2. 開いたら、「Netshwinsockreset」と直接入力し、Enter キーを押して確定します。 3. 確認後、「netshadvfirewallreset&rdqu」と入力します。

Win10でIEを開いた時のEdgeへの自動ジャンプを解除する方法_IEブラウザページの自動ジャンプの解決方法 Win10でIEを開いた時のEdgeへの自動ジャンプを解除する方法_IEブラウザページの自動ジャンプの解決方法 Mar 20, 2024 pm 09:21 PM

最近、多くの win10 ユーザーが、コンピューターのブラウザーを使用するときに、IE ブラウザーが常に自動的にエッジ ブラウザーにジャンプすることに気付きました。このサイトでは、win10でIEを開いたときに自動的にエッジにジャンプして閉じる方法をユーザーに丁寧に紹介しましょう。 1. Edge ブラウザにログインし、右上隅にある [...] をクリックして、ドロップダウン設定オプションを探します。 2. 設定を入力したら、左側の列の「デフォルトのブラウザ」をクリックします。 3. 最後に、互換性で、Web サイトが IE モードで再ロードされないようにチェックボックスをオンにし、IE ブラウザを再起動します。

IEのショートカットが削除できない問題の解決方法 IEのショートカットが削除できない問題の解決方法 Jan 29, 2024 pm 04:48 PM

削除できない IE ショートカットの解決策: 1. 権限の問題、2. ショートカットの破損、3. ソフトウェアの競合、4. レジストリの問題、5. 悪意のあるソフトウェア、6. システムの問題、7. IE の再インストール、8. サードパーティの使用ツール; 9. ショートカットのターゲット パスを確認する; 10. 他の要素を考慮する; 11. 専門家に相談する。詳細な紹介: 1. 権限の問題、ショートカットを右クリックし、[セキュリティ] タブで [プロパティ] を選択し、ショートカットを削除するための十分な権限があることを確認してください。ない場合は、管理者として実行するなどしてみてください。

See all articles