カテゴリー:バグ関連

リスト表示へ

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

2009年5月 8日 14:00

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 ソース

aタグのonclickを使うときの落とし穴(IE6)

2008年11月14日 19:09

今回、偶然遭遇した IE6 のバグ(?)をメモしておきます。
現象は、img 要素でマークアップした画像のボタンに a 要素の onclick なんかで処理をさせる場合のもの。n

今回、form の外から submit() を実行する必要があったので、onclick に関数を設定し、その関数内で処理を行ったあと、form の submit() を実行させたのですが・・。
なんでか、IE6 だけどうしても動かない。なにをしても動かない。
原因はよくわからないが、onclickに設定した関数のあとにreturn falseを追加したらうまく動いた。n

【推測】

社内で協議の結果、a 要素自身の動作と onclick で設定した submit() の処理がぶつかっているのでは? ということに。
その証拠になるかは分からないけど、submit 処理をたとえば

IE7で隣接セレクタに落とし穴? IE7で隣接セレクタを使う際の注意点

2008年2月 8日 13:37

WWW WATCH さんのところで興味深い記事を見つけたので備忘録的に書いてみた。

タイトル通りだけど、どうやら IE7 の隣接セレクタにはバグがあり、HTML 文書でコメントアウトしている要素も"隣接"と認識してしまうもの、という感じ。

IE7 で隣接セレクタを使う際の注意点

IE7 で見た隣接セレクタバグのサンプル画像

IE7で隣接セレクタを使う際の注意点サンプル画像

IE7 で見てもらうとわかるけど、確かにコメントがあるだけで隣接セレクタが効いていない。
(サンプルの上がコメントあり、下がコメントをつけただけで HTML、CSS 共にまったく同じ)n

まだ IE6 が全盛だけど、そろそろ IE7 へ自動更新が始まるから、そうなったら隣接セレクタにお世話になりそう。そのときにこういった類のバグは覚えておくとあとあと楽かも。n

▼ソースの紹介は以下から。n

IEで、背景を指定すると余白が消える

2007年6月 5日 14:40

今作成している案件で、どういうわけか理由のわからない現象が発生したので備忘録的メモ。
問題の原因などがあったら追記しようと思います。

とりあえず現象が起きているサンプルを見てもらったほうがわかりやすいかと思います。

▼サンプルはこちら
IEで、背景を指定すると余白が消えるサンプル1
IEで、背景を指定すると余白が消えるサンプル2

さて、サンプル1が思惑通りにタブメニューになっているもの、サンプル2が下のborderが消えてしまっているものです。(サンプルが適当ですいません(;´д`))

ちなみに、サンプル1と2の違いは、borderを表示するためのdiv要素に、背景を指定しているか、いないか、の違いだけです。
IE7、6では、なぜか背景を指定すると、padding-bottomの設定を無視して高さが失われます。
(背景を指定しないと正常にpadding-bottomが適用されます)
Firefox2.0では特にこういった現象はありませんでした。

とりあえず、背景を指定したい場合は、さらにその外側にdiv要素を配置して、そこに背景を指定するしかなさそうです。

ちなみに、IE5.5ではどうしてもborderが出てきませんでした・・。

peek-a-booバグ

2006年9月25日 10:02

いないいないばぁバグ、と言われるものだそうです。
WinIE で発生するバグで、ボーダーや背景がスクロールしたときに消えるバグだとか。
再読み込みすると出て来たりするのでいないいないばぁと呼ばれてるんでしょう。n

解決策は、問題の出る要素に対してheigh:1%を指定するだけ。
WinIE の場合、高さを指定しても内容によって勝手に高さが変わるので問題ありません。
(他のモダンブラウザでは、高さ指定するとそれに固定されるため、WinIE のみに適用させるようハックを使う必要があります)n

[2009/02/04 追記]
ちなみにこのheight: 1%。IE が持っているhasLayouttrueにする効果のあるプロパティです。
そのため、height: 1%を利用するより、IE の独自プロパティであるzoom: 1を利用したほうがハックを必要としないためいいかもしれません。(未検証)

とある案件でこれが出て、また 1 から CSS 見直さないといけないのかなーと凹んでたので簡単に解決してよかったです。(本当に)
とりあえず備忘録的に書いてみました。
初耳だったので他の人の参考にもなればな、とも思い。
とりあえず久々の更新ですがこれだけです(´・ω・`)

合わせて読むと役に立つかもなエントリー

1