1

「ゼロ幅文字」(#8203) を含むスパンとテキストを含むスパンを持つ単純な div のシーケンスがあります。

IE9 でレンダリングすると、高さに 1 ピクセルの差、または外側スパンのオフセットがあります。これはどのような最適化が原因でしょうか?

それを無効にするcss/javascriptの回避策はありますか?

...
<p>.</p>
<div class="wrap">
    <span class="outer">
        <span class="inner">&#8203;</span>
    </span>
    <span class="outer">
        <span class="inner">8203820382038203820382038203820382038203</span>
    </span>
</div>
<p>.</p>
...

http://jsfiddle.net/srfCR/

ここに画像の説明を入力

4

2 に答える 2

0

これはトリッキーな問題です。実用的なソリューションから始めます。

ZERO WIDTH SPACE U+200B, の代わりに、タグ&#8203;を使用します。<wbr>標準で誓う人々を苛立たせる可能性があることを除いて、既知の欠点はありません. しかし、一部のブラウザーの問題により、(直接改行を許可するという) 望ましい効果が常に得られるとは限りません。実質的にすべてのブラウザーをカバーするには、次のようにする必要があるようです:

<wbr><a class=wbr></a>

CSSコードで

.wbr:after { content: "\00200B"; }

別のアプローチは、フォントサイズを縮小した要素で幅ゼロのスペースをラップすることです。

<span style="font-size: 0.8em">&#8203;</span>

または、より簡単に、

<small>&#8203;</small>

それから説明。この問題は、互換モードの IE 9 でのみ発生するようです。私の仮説は、Quirks Mode では、IE はより原始的なアプローチをフォント管理に適用するというものです。

Verdana テキストに幅ゼロのスペースがある場合、Verdana にはその文字がないことに気付き (他のほとんどの一般的なフォントとは異なり)、おそらくブラウザーのデフォルト フォントから選択します。これはデフォルトで Times New Roman を意味します。そのフォントでは、ゼロ幅のスペースが Verdana 文字よりも高いため、高さの要件が追加されます。これは信じられないことのように聞こえますが (結局のところ、幅が 0 であるため、見えません)、実際には、(IE の設定で) デフォルトのフォントを Arial に変更すると、問題はなくなります。

font-family: Verdana, Arialこのように役立つと思うかもしれません。どうやら、Quirks Mode IE はフォントの扱いが非常に原始的であるため、そうではないようです。リストをチェックせずfont-family、デフォルトのフォントにフォールバックします。

ページで互換モードを回避すると、IE 9 の問題は回避されますが、古いバージョンの IE にはまだ問題がある可能性があります。

于 2012-11-14T17:24:40.160 に答える
0

この問題を解決するには、特定の css ファイルを作成します。

<!--[if IE 9]>
<link rel="stylesheet" href="css/ie9.css"/>
<![endif]-->
于 2012-11-14T16:19:05.953 に答える