Internet Explorer7でのhasLayoutバグを解消するのに、ユニバーサルセレクタやブロック要素にzoom : 1;とするのはやめよう。
zoom : normal; としよう。
「hasLayoutのバグ回避」では、 *{zoom : 1} としていた。しかし、これは様々な問題を引き起こす。
- IE7でズーム率を変更するとインライン要素の後に続くプレーンテキストが重なり合ってしまう
- ol要素の番号表示が1ばかりになる(IE5.5以上)
- ol要素の番号表示が消える(IE6以上)
サンプルページをおいたので、参照して欲しい。ほとんどのインライン要素でズームすると重なり合う。
*{zoom : 1;} でインライン要素もhasLayout=trueとなるため、その後のプレーンテキストが重なってしまう。
それを解決するのに、インライン要素の後に続くプレーンテキストをspan要素でマークアップすると書いた。でも、すべてのインライン要素に続くプレーンテキストをんな風にマークアップするなんて、手間がいくらあっても足りない。
要素を指定して、zoom : 1とすれば、かなりましになる。サンプルページを見る
が、「zoomプロパティとol要素の表示(バグ)」の内容と置換要素の後に続くプレーンテキストが重なるバグが残る。
(2007-08-16追記)
この時点で、input要素とimg要素以外のインライン要素に続くプレーンテキストが重なり合うのは解除される。
実は、zoom : normal; とすると、元々hasLayoutがfalseとなっている要素はfalseのままになる。
img要素とinput要素を除くインライン要素に続くプレーンテキストが重なったり、ol要素の表示に関するバグは発生しない。(2007-08-16追記:ol要素での数字表示が消えたり、おかしかったりするのが解消される)
でも、ユニバーサルセレクタやブロック要素を指定して、zoom : normal; としただけでは、img要素とinput要素の後に続くプレーンテキストが重なるバグが残る。
これは、img要素とinput要素がもともとhasLayout=trueとなっているためである。これらの要素後に続くプレーンテキストはレイアウト情報を持っていないため、ズーム機能を使ったときに、レイアウト情報がおかしくなるのであろう。
hasLayoutをtrueにするには、CSSを使う必要がある。CSSを適用するためには、何らかの要素でマークアップする必要がある。
すなわち、img要素の後のプレーンテキストにはspan要素、input要素の後のプレーンテキストはspan要素やlabel要素でマークアップする必要がある。で、span要素やlabel要素がhasLayout=trueとなるようにすればよい。ここで、zoom:1を使う。span,label{zoom : 1;} とするのだ。
CSSがどのみちValidでないのと、若干spanによるマークアップは必要。だが、*{zoom : 1;}としているよりかは、遙かに手間が減る。
msdn内参考資料
