CriCri
クリエイティブになりたいクリクリ工房
[PR]
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
IE6の:first-letter バグ(?)
今日は「:first-letter」について忘備録を書きます。
これは、見出しや文章の最初の文字を大きくしたり、他の色にできる疑似要素です。
例:
主要なブラウザはこれに対応しているので表示にはまったく問題はありませんが、IE6ではこれに関するバグ(?)があるそうです。
人によっては、セレクタ{プロパティ:値}や、セレクタ { プロパティ:値 }など、間を空けたり詰めたりして書きますが、普通は表示に影響を与えるものではありません。
ところが、IE6ではそれが影響するようなのです。
問題になったCSSの書き方は、セレクタ{プロパティ:値}。
この書き方だと、疑似要素の:first-letter の指定が無視されるそうです。
そこで、私はセレクタ{ プロパティ:値 }で試してみました。
これも指定が無視されて、文字に変化が見られなかった。
CSSの指定は、セレクタ {プロパティ:値}かセレクタ { プロパティ:値 }と書かないと、IE6はちゃんと実行してくれません。
IE7はどんな書き方をしてもOKなのに、まったくIE6ときたら・・・・・・(ため息)
いつも詰めて書いている人も、「:first-letter」を使うときは、そこだけでもセレクタと{}の間を空けて書くように注意しましょう。
これは、見出しや文章の最初の文字を大きくしたり、他の色にできる疑似要素です。
例:
#TopTitle:first-letter { color:#000; }
主要なブラウザはこれに対応しているので表示にはまったく問題はありませんが、IE6ではこれに関するバグ(?)があるそうです。
IE6の疑似要素バグ(?)
CSSは、セレクタ {プロパティ:値}という書き方をします。人によっては、セレクタ{プロパティ:値}や、セレクタ { プロパティ:値 }など、間を空けたり詰めたりして書きますが、普通は表示に影響を与えるものではありません。
ところが、IE6ではそれが影響するようなのです。
問題になったCSSの書き方は、セレクタ{プロパティ:値}。
この書き方だと、疑似要素の:first-letter の指定が無視されるそうです。
そこで、私はセレクタ{ プロパティ:値 }で試してみました。
これも指定が無視されて、文字に変化が見られなかった。
問題の回避
セレクタと{}の間を空けて書く。CSSの指定は、セレクタ {プロパティ:値}かセレクタ { プロパティ:値 }と書かないと、IE6はちゃんと実行してくれません。
IE7はどんな書き方をしてもOKなのに、まったくIE6ときたら・・・・・・(ため息)
いつも詰めて書いている人も、「:first-letter」を使うときは、そこだけでもセレクタと{}の間を空けて書くように注意しましょう。
TRACKBACK
TrackbackURL
COMMENT