IE6,7で、疑似要素を指定した要素に隣接するスタイルがおかしくなる件

2009-05-08 14:00:19

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

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

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

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

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

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

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

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

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

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

CSS ソース

HTML ソース

※このエントリは ブロガーにより投稿されたものです。朝日インタラクティブ および ZDNet Japan編集部の見解・意向を示すものではありません。
  • 新着記事
  • 特集
  • ブログ
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]