IE 7 の :first-letter 擬似要素の font-size の算出

IE 7 だけ文字が小さいぞ ?

IE 7 での表示確認を目下行っている最中ですが、 hxxk.jp では大きな表示崩れは起こっていないようです。 まあ、 IE 6 でもバグ対策で一部の border を表示しないといった対応を採っていた以外は同じような表示になっていたので崩れるとは思っていませんでしたが。

しかし、 MOMENT の方でちょっと表示違いが出ていることに気付きました。 具体的に言うと、 h2 要素の :first-letter 擬似要素部分の文字が小さい......というか h2 要素の font-size: 2em; が反映されずに、ユニバーサルセレクタの font-size: 100%; と同じサイズになっている模様。 文字だけだと分かり辛いでしょうからスクリーンショット置いておきますね。

IE 6 での表示

• 

IE 7 での表示

• 

Firefox 1.5.0.7 での表示

• 

Opera 9.02 での表示

• 

CSS はどのように書いているか

MOMENT の CSS は、 hxxk.jp のものとは別に styles-site.css を作成していますので基本的にはそれを見ていただければ良いのですが、今後修正を行う可能性がありますので、この現象が起こっている時点の該当部分の記述を転載しておきます。

* {
    font-size: 100%;
}

body {
    background: #<MTEntries lastn="1"><$MTEntryDate format="%w%w%M"$></MTEntries>ff url("slash.png") left top repeat;
    /* MTEntryDate により、インデックステンプレートの更新曜日と更新分によって背景色を変更。
       http://lab.rails2u.com/bgmaker/ と http://www.lucky-bag.com/archives/2006/09/background-patterns.html を組み合わせて実現。
    */
}

h2 {
    border-top: 1px solid #ddd;
    border-right: 1px solid #ccc;
    margin-bottom: -1em;
    padding-right: 0.5em;
    color: #eee;
    background: #fff url("h2.jpg") right top repeat-y;
    font-family: Arial , Verdana , sans-serif;
    font-weight: bold;
    font-size: 2em;
    text-align: right;
}

h2:first-letter {
    color: #ddd;
    font-family: Arial , Verdana , sans-serif;
}

font-size プロパティの仕様

MOMENT の CSS を基に考える前に、 font-size プロパティの仕様をおさらいしてみます。 CSS2 と CSS 2.1 では微妙に異なりますので両方とも仕様書から引用してみましょう。

Value:

<absolute-size> | <relative-size> | <length> | <percentage> | inherit

Initial:

medium

Applies to:

all elements

Inherited:

yes, the computed value is inherited

Percentages:

refer to parent element's font size

Media:

visual

これが CSS2 の Fonts - 15.2.4 Font size: the 'font-size' and 'font-size-adjust' properties の仕様で、次に引用するのが CSS 2.1 の Fonts - 15.7 Font size: the 'font-size' property の仕様です。

Value:

<absolute-size> | <relative-size> | <length> | <percentage> | inherit

Initial:

medium

Applies to:

all elements

Inherited:

yes

Percentages:

refer to parent element's font size

Media:

visual

Computed value:

absolute length

2em の font-size になるんじゃないの ?

この点については私もみっちりと仕様を読んで理解していたわけではないのですが、 :first-letter 擬似要素 (CSS2 では http://www.w3.org/TR/CSS2/selector.html#first-letter) ってその元となる要素の値を元にするんじゃないのかなあ、と考えているのですが、実際のところどうなんでしょう ?

今回の現象が起こっている MOMENT の CSS を、 CSS 2.1 の適用順で考えてみると、 h2:first-letter 擬似要素の font-size は

1. カスケーディングを行い、 ( ここでは製作者スタイルシートが適用されたと仮定して ) h2 要素の font-size から h2:first-letter 擬似要素の font-size を取得
2. h2 要素では font-size: 2em; と指定されているので、親要素である body 要素の font-size プロパティの値の 2 倍のサイズとなる
3. body 要素では font-size の指定が無いので、親要素である html 要素の font-size プロパティの値を継承する
4. html 要素では font-size の指定が無いので、ユニバーサルセレクタで指定されている font-size: 100%; を継承する
5. font-size プロパティの初期値は medium なので、ユニバーサルセレクタでの font-size の値は medium の 100% のサイズ、すなわち medium となる

という順序で font-size が計算されると思うんですが......擬似要素の font-size ってその大元の要素 ( この場合は h2 要素ですね ) の font-size を継承するようになっているんですかね ? この辺りが未だによく分かりません。 でも、 IE 7 では表示を見る限りでは h2 要素の font-size ではなくユニバーサルセレクタの font-size から継承しているように思えます。

......ということで、 CSS の記述を修正しながら試してみることにしました。

h2:first-letter 擬似要素に font-size: 100%; を指定すると

これは何故そういう対応を行ったのか忘れましたが、まず h2:first-letter 擬似要素に font-size: 100%; を指定してみました。 この指定でも、最初の状態を考えるとユニバーサルセレクタの font-size (medium) に対する 100% となり、 h2 要素の 2em サイズにはならないと思っていたのですが......。

h2:first-letter {
    color: #ddd;
    font-family: Arial , Verdana , sans-serif;
    font-size: 100%;
}

IE 6 での表示

• 

IE 7 での表示

• 

Firefox 1.5.0.7 での表示

• 

Opera 9.02 での表示

• 

この指定だと h2:first-letter 擬似要素の font-size も 2em となり、私の意図通りの表示になりました。

body 要素に font-size: 100%; を指定すると

次に、ユニバーサルセレクタでは ( 固有性は低いとはいえ ) 全ての要素に対する指定になるため、ユニバーサルセレクタではなく body 要素にて font-size: 100%; を指定しました。 これって以前から無意識に CSS に書いていましたが、 100% なら明示しなくてもいいのかなあ......と今回気が付きました。 何かのバグ対策だったっけ ?

* {
    /* font-size: 100%; */
}

body {
    background: #<MTEntries lastn="1"><$MTEntryDate format="%w%w%M"$></MTEntries>ff url("slash.png") left top repeat;
    /* MTEntryDate により、インデックステンプレートの更新曜日と更新分によって背景色を変更。
       http://lab.rails2u.com/bgmaker/ と http://www.lucky-bag.com/archives/2006/09/background-patterns.html を組み合わせて実現。
    */
    font-size: 100%;
}

IE 6 での表示

• 

IE 7 での表示

• 

Firefox 1.5.0.7 での表示

• 

Opera 9.02 での表示

• 

この指定でも h2:first-letter 擬似要素の font-size も 2em となり、私の意図通りの表示になりました。

ユニバーサルセレクタと body 要素に font-size: 100%; を指定すると

では、ユニバーサルセレクタと body 要素に font-size: 100%; を指定したらどうなるのだろうと思いました。

* {
    font-size: 100%;
}

body {
    background: #<MTEntries lastn="1"><$MTEntryDate format="%w%w%M"$></MTEntries>ff url("slash.png") left top repeat;
    /* MTEntryDate により、インデックステンプレートの更新曜日と更新分によって背景色を変更。
       http://lab.rails2u.com/bgmaker/ と http://www.lucky-bag.com/archives/2006/09/background-patterns.html を組み合わせて実現。
    */
    font-size: 100%;
}

IE 6 での表示

• 

IE 7 での表示

• 

Firefox 1.5.0.7 での表示

• 

Opera 9.02 での表示

• 

この指定ではユニバーサルセレクタの font-size を継承しているのか ? 同じ大きさになり、私の意図通りの表示にはなりませんでした。 詳しい解説はしませんが、 selector's specificity はユニバーサルセレクタは 0000 で、要素セレクタは 0001 なので、 h2:first-letter 擬似要素の font-size は h2 要素の font-size の方が selector's specificity は高くなると思うのですが......。

ユニバーサルセレクタに absolute units を指定すると

次に、 font-size: 100%; という <percentage> ではなく、明確に absolute units を指定したらどうなるのだろうと思いました。 ついでに body 要素の 100% 指定は残しています。

* {
    font-size: 12pt;
}

body {
    background: #<MTEntries lastn="1"><$MTEntryDate format="%w%w%M"$></MTEntries>ff url("slash.png") left top repeat;
    /* MTEntryDate により、インデックステンプレートの更新曜日と更新分によって背景色を変更。
       http://lab.rails2u.com/bgmaker/ と http://www.lucky-bag.com/archives/2006/09/background-patterns.html を組み合わせて実現。
    */
    font-size: 100%;
}

IE 6 での表示

• 

IE 7 での表示

• 

Firefox 1.5.0.7 での表示

• 

Opera 9.02 での表示

• 

この指定でもユニバーサルセレクタの 12pt を継承しているようで、同じ大きさになりました。 しかもこの指定は IE 6 でも同様に h2:first-letter 擬似要素に h2 要素の font-size: 2em; が効いていません。 だんだんこんがらがってきました。

ユニバーサルセレクタに relative units を指定すると

今度は font-size: 100%; という <percentage> ではなく、 relative units を指定したらどうなるのだろうと思いました。 これも body 要素の 100% 指定は残しています。

* {
    font-size: 16px;
}

body {
    background: #<MTEntries lastn="1"><$MTEntryDate format="%w%w%M"$></MTEntries>ff url("slash.png") left top repeat;
    /* MTEntryDate により、インデックステンプレートの更新曜日と更新分によって背景色を変更。
       http://lab.rails2u.com/bgmaker/ と http://www.lucky-bag.com/archives/2006/09/background-patterns.html を組み合わせて実現。
    */
    font-size: 100%;
}

IE 6 での表示

• 

IE 7 での表示

• 

Firefox 1.5.0.7 での表示

• 

Opera 9.02 での表示

• 

この指定でもユニバーサルセレクタの 16px を継承しているようで、同じ大きさになりました。 しかもこの指定は IE 6 でも同様に h2:first-letter 擬似要素に h2 要素の font-size: 2em; が効いていません。 やっぱり h2 要素よりもユニバーサルセレクタの方が selector's specificity が高くなっているようにしか思えません。

まとまらない

色々試しましたが、よく分かりませんでした。 これは IE 7 のバグとして捉えていいのでしょうか...... ? 擬似要素の値の算出については私の思い違いがあるかもしれないので、その辺りに落とし所があるような気もします。

とりあえず一定の条件が揃うと :first-letter 擬似要素の font-size が意図通りの大きさにならないという経験をしましたよ、ということで一旦締めさせていただきます。 それと、 :first-line 擬似要素でももしかしたら似たような結果になるかもしれませんが、そこまでは試していません。