IE6.0 では、float:left を使用した li タグの垂直高さは、English の方が Chinese_html/css_WEB-ITnose よりも 1px 低くなります。-htmlチュートリアル-php.cn

IE6.0 では、float:left を使用した li タグの垂直高さは、English の方が Chinese_html/css_WEB-ITnose よりも 1px 低くなります。

WBOY

リリース： 2016-06-24 12:11:32

オリジナル

981 人が閲覧しました

<ul style="list-style:none;text-decoration:underline;">  <li style="float:left;">中文</li>  <li style="float:left;">English</li>  <li style="float:left;padding-top:1px;">中文</li>  <li style="float:left;">English</li>  <li style="float:left;">中文</li></ul>

ログイン後にコピー

ディスカッション（解決策）に返信

元の投稿者の意味がわかりません
padding-top:1px と書くとどうなるでしょうか？

宛先: 1 階
このコードはまだ試していないようです。 IE6.0で開いてみると、この行を書いた意味が分かると思います
真ん中の3つは面一で、最初と最後のは真ん中の3つより1ピクセル上にあります
その英語を示すために書きました中国語の1px下、padding-top:1pxよりも優れています。3番目のliを1px下に移動して、側面に合わせます
それらの位置関係は「- _ _ _ -」であり、ここにローカル画像をアップロードする方法はありません

<!DOCTYPE HTML><html>	<head>		<meta charset="gb2312" />		<title></title>		<style>				</style>	</head>	<body>		<ul style="list-style:none;text-decoration:underline;">		  <li style="float:left;">中文</li>		  <li style="float:left;">English</li>		  <li style="float:left;">中文</li>		  <li style="float:left;">English</li>		  <li style="float:left;">中文</li>		</ul>	</body></html>

ログイン後にコピー

padding-top:1px を削除すると、ここでのテストは水平になります。

投稿者がデモ全体を投稿するのが最善です

4 階へ:
コードは完成しました。他の CSS はありません。すべてのコンテンツを * として保存するだけです。 html。
3階に掲載されている写真を見てください。よく見ると1pxの高さの違いがあることがわかります。
IE6.0のブラウザを使用していますか？ IE6.0.2900.5512

フォントを拡大しても元の投稿者の高低差が分かりません

<!DOCTYPE HTML><html>    <head>        <meta charset="gb2312" />        <title></title>        <style>			body {				font-size:31px;			}			li {				text-decoration:underline;			}        </style>    </head>    <body>        <ul style="list-style:none;">          <li style="float:left;">中文</li>          <li style="float:left;">English</li>          <li style="float:left;">中文</li>          <li style="float:left;">English</li>          <li style="float:left;">中文</li>        </ul>    </body></html>

ログイン後にコピー

ie6, 7, 8 ff opera を試しましたが、問題ありません

テストしたところです長い間、何かが間違っていると思っていました超自然的な出来事については、比較を繰り返すことで発見されました:
まったく同じコードであっても、ページのエンコーディングは UTF-8 でなければバグが発生しませんが、GB2312 ではバグが発生しませんバグの原因
観察により、これら 2 つのエンコーディングの英語フォントは実際には異なることがわかりました。また、GB2312 の英語の幅も異なります。

では、このようなバグの原因は何でしょうか?コーディングやページUIを変更せずに解決するにはどうすればよいでしょうか?

文字セットとフォントの問題については、まず本文で Web サイトで使用する文字セットとフォントを定義します。 Microsoft Yahei を使用していると思います。 Song Princess に変更してみてください

Microsoft Yahei は使用しません。他に いかなる コードもまったくありません。li に float:left という完全な HTML コードを使用するだけです。すべてを直接コピーし、ファイルとして保存します。 * utf-8.html ファイルで、このような状況に遭遇したプログラマーの友人は多いのではないでしょうか?このコードは非常に一般的に使用されていると考えられます

このバグを確認する手順:
1. IE が 6.0 であることを確認します
2. メモ帳を開きます
3. 1 階のすべてのコンテンツをコピーしてメモ帳に貼り付けます
4. メニュー- >ファイル->名前を付けて保存し、エンコードに UTF-8 を選択し、拡張子に html を選択します
5. 保存したファイルをダブルクリックします
====
上記の手順に従うと、私が言及したバグが確実に表示されます。

助けてください…
誰か助けてくれませんか…

大丈夫ですか？ 4 階で提供されたコードは、ここでテストすると問題ありません

投稿者はなぜエンコード方式を UIF-8 に変更したいのでしょうか?それに変更することには問題がありますが、なぜそれに変更するのでしょうか？

Web サイト自体は UTF-8 でエンコードされていますが、この問題のためだけに Web サイト全体のエンコードを変更したとしても、少しは改善されるのではないでしょうか。さらに、UTF-8 はユニバーサルエンコーディングです。さらに、そのようなバグが存在するのですから、コーディングを変更して回避するだけではなく、その原因を究明する必要がありますよね。フォーラムに参加しているプログラマは、何が起こっているのかを知っただけで満足しているだけで、その理由は分からないのでしょうか?

この問題は、中国語と英語の解析の異なるエンコーディングの異なるベースラインによって引き起こされるはずです。

例えば、この

<!DOCTYPE HTML><html>    <head>        <meta charset="utf-8" />        <title></title>        <style>            body {                font-size:50px;				font-family:arial;            }            li {                text-decoration:underline;            }        </style>    </head>    <body>        <ul style="list-style:none;">          <li style="float:left;">中文</li>          <li style="float:left;">English</li>          <li style="float:left;">中文</li>          <li style="float:left;">English</li>          <li style="float:left;">中文</li>        </ul>    </body></html>

ログイン後にコピー

ie6、7、8 では、文字 "g" が下線を超えてしまい、下線がオフセットされます
ff と chrome では、文字 "g" が下線を超えてしまいますが、下線はまだ非常に平坦です。。。

私は表面だけを見ました。具体的な状況については研究し議論する必要があります。。。。

誰かがブルーでそれについて議論しました、
まずは見てみましょう
http://bbs.blueidea.com/thread-2878142-1-1.html

とても感謝しています、ついに誰かが理解してくれました、ただ、残念ですが、これらすべてを確認し、今提供していただいた投稿も注意深く読み、この問題を修正する方法は次のとおりであると結論付けました:
1. 属性を追加します。それを言うには、zoom:1;vertical-align:baseline;display:inline-block; の 3 つの方法があります
しかし、私の試みでは、それらはすべて無効です。
2. フォントを変更します。これは影響が大きすぎるため、良いアイデアではありません。

CSS Hack を通じてこの問題を解決する方法はありますか? (方法 1 と似ています)。
ありがとうございます。

ポスターはとても思慮深いです。。。

http://gigalens.com/2009-07/webstandards-ie6-typographiy-bug.html

すごいですね

え？結局、結論は「フォントを変える」しかないようですね。
じゃあ、運命を受け入れるしかないですね。
もっと「きれいな」コードを書きたいだけです。