letter-spacingを指定した要素内の表示が崩れる

症状

自動折り返しが行われる量の内容物（長い文章など）を持つ要素に対してletter-spacingプロパティを指定すると、表示が崩れる。

例示

<p style="letter-spacing:0.2em;">MacIEは……あります。</p>

MacIEは、DOCTYPEの記述によってCSSのレンダリングが変わります。W3C勧告に準拠した「標準モード」と従来のIEのレンダリングを継承した「互換モード」の2種類のモードがあります。MacIEは、DOCTYPEの記述によってCSSのレンダリングが変わります。W3C勧告に準拠した「標準モード」と従来のIEのレンダリングを継承した「互換モード」の2種類のモードがあります。

文字間隔を0.2emにしています。折り返されていない場合はウィンドウ幅を狭めてください。

スクリーンショット

キャプチャ後に縮小しています。

WinIE6WinIE6.0での表示（標準モード）

補足

letter-spaceプロパティを含むスタイル指定を@mediaで括るとMacIEはその指定を認識しないので、バグの発生を回避できます。

@media screen, print {
  p {
    letter-spacing: 0.2em;
  }
}

このバグは要素内に多バイト文字が含まれている場合に発生するもので、内容物が1バイト文字だけの場合は発生しないようです。（2002-12-02追記）

修正状況

MacIE4〜5に渡って発生する模様。

報告書き込み

【MacIE4〜5】（有名だが登録されてないので一応ここに書き込む）
自動折返しされる長さを持った要素にletter-spacingを適用すべからず。
表示が崩れます。
対処法としては、
@media screen,print {
p{letter-spacing:0.2em;}
}
と@mediaで括ってやるとMacIEは認識しない。

関連記事

スポンサーリンク

window.innerHeight

ホームページ製作・web系アプリ系の製作案件募集中です。

上に戻る