IE7のページズームをするとフォームとその横のテキストが重なる現象を解決

※ページを150%拡大した時

IE7のページズーム機能を使ってページを拡大するとフォームコントロールとそのあとに続くテキストが重なってしまうことがあります。これを簡単に解決する方法です。

CSS記述

 
label {
    zoom: 1;
}
 

HTML記述

 
<p>
    <input type="checkbox" /><label>チェック1</label>
    <input type="checkbox" /><label>チェック2</label>
</p>
<p>
    <input type="radio" /><label>ラジオ1</label>
    <input type="radio" /><label>ラジオ2</label>
</p>
 

→フォームとテキストが重なる現象を解決したサンプル

IE独自拡張のhasLayoutの問題で重なってしまうみたいです。label要素にzoom: 1;を適用させることでhasLayoutがonになる（レイアウト情報を持つ）ので、フォームコントロールとテキストが重ならない訳です。