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

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

管理人:sofu

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になる(レイアウト情報を持つ)ので、フォームコントロールとテキストが重ならない訳です。

blog comments powered by Disqus

PageTop