contentプロパティに指定した日本語文字が文字化けして表示される

症状

外部スタイルシートでcontentプロパティの値に日本語などの多バイト文字を指定すると文字化けして表示される。

例示

外部スタイルシート「b001.css」:

@charset "Shift_JIS";
div.sample1:before {
  content: "日本語";
  color: red;
}

このHTML文書:

<div class="sample1">←content</div>
←content

矢印の前に前景色が赤色の文字列「日本語」が表示されるはずです。

スクリーンショット

N7N7.02での表示

補足

外部スタイルシート内でバックスラッシュを用いたエスケープを行えば文字化けしません。

@charset "Shift_JIS";
div.sample2:before {
  content: "\65E5 \672C \8A9E";
  color: red;
}
<div class="sample2">←content</div>
←content

または、外部スタイルシートの文字コードをUCS-2にすることでも文字化けを回避できるそうです。しかし、それ以外の文字コードを使用した場合は@charsetを明示したとしてもエスケープが必要になります。

修正状況

Safari1.0でこの不具合が発生するそうです。

スポンサーリンク

関連記事

スポンサーリンク

VAR_POP関数 母集団分散を求める

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

上に戻る