Yahoo!知恵袋を覘いていて、ちょっと興味深いものを発見したのでエントリー。
概要を書くと、":first-letterなどの疑似要素を指定した要素に隣接する要素のスタイルが崩れる" というもの。（タイトルまんまですね）
まずは以下のサンプルを、IE6,7 で見てみてください。
見ていただくと分かりますが、2 つ目以降のテキストが、ボックスからはみ出しているのが分かると思います。
ボックスがずれているならまだしも、はみ出すのは完全にバグですよね。
サンプル 01 がなんの対策もしていないもの、サンプル 02 が対策をしたものになります。
これは推測ですが、おそらく IE の場合、疑似要素を適用すると hasLayout が false にでもなるのではないでしょうか。そのために、隣接する要素のスタイルに影響が及ぶと。
試しに、隣接させないよう <br /> など別の要素を入れるとテキストはボックスからはみ出さずに正常に表示されるようになります。
hasLayout ではないか、と思った要因は、hasLayout を ture にするプロパティを指定すると（サンプルでは zoom: 1;）この問題が改善されるためです。
今回のサンプルでは:first-letterでしたが、:first-lineでも同様の現象が発生しました。そのため、問題は "疑似要素ではないか" と思ったわけです。
とりあえず、疑似要素を指定した要素の前後で問題が発生した場合はzoom: 1;を追加することで問題は回避できそうです。
今回、偶然遭遇した IE6 のバグ（？）をメモしておきます。
現象は、img 要素でマークアップした画像のボタンに a 要素の onclick なんかで処理をさせる場合のもの。
今回、form の外から submit() を実行する必要があったので、onclick に関数を設定し、その関数内で処理を行ったあと、form の submit() を実行させたのですが・・。
なんでか、IE6 だけどうしても動かない。なにをしても動かない。
原因はよくわからないが、onclickに設定した関数のあとにreturn falseを追加したらうまく動いた。
社内で協議の結果、a 要素自身の動作と onclick で設定した submit() の処理がぶつかっているのでは？ ということに。
その証拠になるかは分からないけど、submit 処理をたとえば
WWW WATCH さんのところで興味深い記事を見つけたので備忘録的に書いてみた。
タイトル通りだけど、どうやら IE7 の隣接セレクタにはバグがあり、HTML 文書でコメントアウトしている要素も"隣接"と認識してしまうもの、という感じ。
IE7 で見てもらうとわかるけど、確かにコメントがあるだけで隣接セレクタが効いていない。
（サンプルの上がコメントあり、下がコメントをつけただけで HTML、CSS 共にまったく同じ）
まだ IE6 が全盛だけど、そろそろ IE7 へ自動更新が始まるから、そうなったら隣接セレクタにお世話になりそう。そのときにこういった類のバグは覚えておくとあとあと楽かも。
▼ソースの紹介は以下から。
いないいないばぁバグ、と言われるものだそうです。
WinIE で発生するバグで、ボーダーや背景がスクロールしたときに消えるバグだとか。
再読み込みすると出て来たりするのでいないいないばぁと呼ばれてるんでしょう。
解決策は、問題の出る要素に対してheigh:1%を指定するだけ。
WinIE の場合、高さを指定しても内容によって勝手に高さが変わるので問題ありません。
（他のモダンブラウザでは、高さ指定するとそれに固定されるため、WinIE のみに適用させるようハックを使う必要があります）
[2009/02/04 追記]
ちなみにこのheight: 1%。IE が持っているhasLayoutをtrueにする効果のあるプロパティです。
そのため、height: 1%を利用するより、IE の独自プロパティであるzoom: 1を利用したほうがハックを必要としないためいいかもしれません。（未検証）
とある案件でこれが出て、また 1 から CSS 見直さないといけないのかなーと凹んでたので簡単に解決してよかったです。（本当に）
とりあえず備忘録的に書いてみました。
初耳だったので他の人の参考にもなればな、とも思い。
とりあえず久々の更新ですがこれだけです(´・ω・｀)
合わせて読むと役に立つかもなエントリー
カテゴリー
最近のエントリー
テスト的に設置してます。好きにコメントしてみてくださいｗ
©2009 CSS-EBLOG All Rights Reserved
