IE7の拡大機能、仕様？バグ？

IE7でブラウザの右下にある数値を変えて拡大してみる。見事にレイアウトが崩れる場合がある。
IE7の拡大時のレンダリングは、Operaと同じように、bodyそのものを拡大する。はずだが・・・。

Operaで問題ないし、マークアップはW3Cの記述ルールを遵守しているのに、レイアウトが崩れるのはIE7独自の仕様なのか。
もしかするとそこまで想定していなかったバグなのかもしれない。

IE7で拡大するのはやめようと思う。しかし、案件によっては拡大でもレイアウトが崩れないようにしなければいけないことがある。
半日試行錯誤した結果、見えてきたことがあるので、備忘録として紹介します。

.sample{
position:relative;
float:left;
width:○○px;（auto以外）
}

position:relative;

基本は、これ。「position:relative;」。レイアウトが崩れる親要素タグに「position:relative;」を追加することで回避できました。
ただ、marignやpaddingの上下の取り方に違和感を感じる。marginやpaddingの上下の余白が拡大するたびに異常に広がり、拡大率とmargin、paddingの余白の空きが比例していないのです。

float:left;

そこで、試しに「float:left;」を追加したところ、うまくいきました。これで一見落着かと思いきや、まだ盲点が。
Javascriptでdisplayの切り替え処理を行った場合、横幅が崩れてしまう箇所がありました。

width

そこで、試しにwidthプロパティを追加したところ、オールクリアです。

これって・・・

positonとfloatを同タグに設定することは、ルール上あり得ないのですが、こうしないと回避できませんでした。ってやっぱりバグなんじゃないかなぁ、と思う次第。しかもレイアウト崩れはIE7にしか発生しないことから、IE7の独自仕様と言ってしまえばそれまでですが・・・。
というわけで、IE7にしか効かないようハックをかまして仕上げます。

課題

formタグ要素がある場合、かつJavascriptでdisplayの切り替え処理を行った場合、この回避策ではうまくいっていません。