スタイルシートについての質問です。

以下の現象で困っています。

【現象】
文頭に「※」記号を使ったとき:first-letterの設定が2文字目まで適応されてしまいます。

WinXPのOpera9だと3、4、5、FireFox2だと4が、2文字目まで黒背景赤文字になります。
IE6では大丈夫でした。

文字コードセットはshift_jisです。

【望む回答】
1)この現象を回避する方法はありますか?
 今は(5)で対応していますが、半角スペースを入れないで済むようにしたいです
2)Macが無いので確認できないので、Macではどうのようになるか、解決法も合わせて教えてください(FireFox/Opera/Safari)。

【CSS】

p.test {
color: #000;
background: #EEE;
}

p.test:first-letter {
color: #F00;
background: #333;
}

【HTML】

<p class="test">
日本語1
</p>

<p class="test">
ABCD2
</p>

<p class="test">
※記号3
</p>

<p class="test">
※※※※4
</p>

<p class="test">
※ ※記号の後に半角スペースが入っています5
</p>


それでは、よろしくお願いいたします。

回答の条件
  • 1人1回まで
  • 登録:2008/01/09 21:43:03
  • 終了:2008/01/16 00:26:12

ベストアンサー

id:tabbycats No.1

tabbycats回答回数14ベストアンサー獲得回数32008/01/11 01:28:26

ポイント60pt

ご存知かもしれませんが、

先頭文字に記号(UNICODEでPunctuationとして分類される文字)を使った場合、

:first-letterの設定が2文字目まで適応されるのは仕様です。


:first-letterについては以下参照。

http://www.w3.org/TR/CSS21/selector.html#first-letter

http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#f...


「※」はUNICODEでPunctuationとして分類される文字になりますので、:first-letterが適応されます。

http://www.unicode.org/cgi-bin/GetUnihanData.pl?codepoint=203B


回避する方法ではないのですが、ご参考までに。

id:sayao

約物は2文字目まで適用されるんですね。

回避方はないのですか。スタイルシート側で回避できればと思ったのですが・・・。

この場合Operaの実装が正しいので、Operaに準じるのが良さそうですね。

ご解答ありがとうございました。

2008/01/16 00:24:03
  • id:sayao
    質問文章の補足です。

    >WinXPのOpera9だと3、4、5、FireFox2だと4が、
    はに出てくる数字はHTMLソースの中の段落の番号です。

    1は
     <p class="test">
     日本語1
     </p>
    にあたります。
  • id:sayao
    何度も補足すいません。

    【望む回答】の2は絶対条件ではありませんので、1だけわかる場合だけでもぜひご解答ください。

    よろしくお願いいたします。

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません