April 13, 2005

first-letter の悪夢

サイトの CSS 改良に伴い、first-letter 疑似要素を用いて見出しの先頭 1 文字の色を変えてみようと思った。

CSS を書き換え、Firefox で期待通りの表示となっているのを確認した後で IE の表示を確認すると…ぐあー、なんだこれ。first-letter を指定した要素に続くブロックが、ボーダーを突き破り左にはみ出している。

何が原因なんだ、もしかして IE のバグなのか…試しに first-letter に適用したプロパティを削除してみると…元の表示に戻った。

いったいどうなっているのかと苦労して情報を見つけると、どうやらこういうことらしい。

擬似要素を含む要素に後続する要素の内容物が左右にはみ出る

なんだか条件が複雑なのですが、検証してみると自分のサイトに見事にマッチしている。うわ、何このバグ。

対策として示されているwidth プロパティや height プロパティの値を明示してみると、はみ出す問題は直った…が、今度は肝心の first-letter 疑似要素を用いたブロックがガタガタになる。あげくの果てには標準準拠モードと後方互換モードで表示が全く異なってしまう始末。

結局、どうやっても IE でまともに表示できないので、今回は先頭 1 文字の色を変えるのはあきらめた。悔しい。やっぱり IE は窓から…(略)。

TrackBacks

  • トラックバック内容 (excerpt) には必ずひらがなを含めてください。入っていない場合は拒否します。
  • このエントリの URI を含まない (リンクしていない) トラックバック元からは受信しません。

Comments

投稿フォーム

  • コメント以外の入力は任意です。
  • コメント文中には必ずひらがなを含めてください。入っていない場合は拒否します。
  • メール アドレスは公開されませんが、URI を入力した場合は名前がリンクとなります。なお、いずれもコメント欄への入力についてはリンクされます。
  • このページの URI をリファラとして送信しない UA からの投稿は受け付けません。