Yahoo!知恵袋を覘いていて、ちょっと興味深いものを発見したのでエントリー。n

概要を書くと、":first-letterなどの疑似要素を指定した要素に隣接する要素のスタイルが崩れる" というもの。（タイトルまんまですね）n

まずは以下のサンプルを、IE6,7 で見てみてください。n

見ていただくと分かりますが、2 つ目以降のテキストが、ボックスからはみ出しているのが分かると思います。
ボックスがずれているならまだしも、はみ出すのは完全にバグですよね。n

サンプル 01 がなんの対策もしていないもの、サンプル 02 が対策をしたものになります。n

これは推測ですが、おそらく IE の場合、疑似要素を適用すると hasLayout が false にでもなるのではないでしょうか。そのために、隣接する要素のスタイルに影響が及ぶと。n

試しに、隣接させないよう <br /> など別の要素を入れるとテキストはボックスからはみ出さずに正常に表示されるようになります。n

hasLayout ではないか、と思った要因は、hasLayout を ture にするプロパティを指定すると（サンプルでは zoom: 1;）この問題が改善されるためです。n

今回のサンプルでは:first-letterでしたが、:first-lineでも同様の現象が発生しました。そのため、問題は "疑似要素ではないか" と思ったわけです。n

とりあえず、疑似要素を指定した要素の前後で問題が発生した場合はzoom: 1;を追加することで問題は回避できそうです。n

CSS ソース

HTML ソース

この記事のカテゴリー一覧を見る⇒バグ関連

• パーマリンク
• コメント(0)
• トラックバック(0)

• <<iPhoneに最適化してみました（TOPだけ）
• |
• IE8だけに適用させるCSSハック>>