年に1度か2度遭遇するレベルですが遭遇する不具合です。

マウスオーバーで色を変えているのですが、
IE6で見た時に限りマウスオーバーで色だけでなく表示位置まで変化するという不具合が発生します。
原因が良く分からず、仕方無しにその部分ではhoverを諦めたりしていたのですが、今回久しぶりに遭遇したので、解決に再挑戦してみたところ、
あっさり直りました。
インライン要素のみで構成された要素と同レベルでhover要素を置いた場合にこの症状は発生する場合があるようです。

ですから、この用に、直前のインライン要素共をブロック要素で囲ってやれば問題解決です。
おそらくは、インライン要素の再描画時にレンダリング処理にエラーが起きてしまっているのでしょう。
高さや幅の概念を持たないインライン要素は、描画時の定義づけが何気にややこしいのかもしれませんね。
まぁよく分かりませんが( ^ω^)再現性がいまいち分からん
とりあえず、
「hover使ったら位置がズレる」トラブルに見舞われたら、その要素と同じレベルにある要素をブロック要素で囲ってみましょう。
直るかもしれません。
と、思っていたら、 インライン要素であることは問題が無かったようです。
単純に、「タグで囲っていない」ということが問題だったようです。
ためしにemタグで囲ってみたら、普通に表示できました。
構造的には 複数のdivの中にformがあり、ブロック要素、インライン要素とタグ無しが混ざっている状態で、タグ無しにhoverをつけるとIE6の場合はhover時にバグるという現象のようですね。
「hover使ったら位置がズレる」トラブルに見舞われたら、その要素と同じレベルにあるテキストで、タグで囲まれていないものが無いか確認し、あったらそれを個別に分けるという形でもいいようです。
まぁ、ブロック要素でまとめて囲ってしまうほうが楽ですが、構造考えた時にはspanなどで個別に囲ってやるほうが適当であるような気もします(っ・ω・c)
! 更新前のキャッシュを見ていたようで、 spanで個別に囲っても件のバグが発生しました。
ブロック要素が安定鉄板っぽいです(´・ω・`)
2010-1231-1634