人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

スタイルシートについての質問です。
以下の現象で困っています。

【現象】
文頭に「※」記号を使ったとき: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>


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

●質問者: sayao
●カテゴリ:インターネット ウェブ制作
✍キーワード:333 background COLOR CSS firefox
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● tabbycats
●60ポイント ベストアンサー

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

先頭文字に記号(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


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

◎質問者からの返答

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

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ