サイト内検索  

Internet Explorer7のズーム機能に対応させる

Internet Explorer7(以下IE7と省略します)では、ページ全体の拡大機能(ズーム機能)がつきました。

Internet Explorer7の画面

右下についているでページのズーム率を変更することができます。文字サイズを大きくしたいのに、大きくならないといった場合でも、この機能を使えば文字を大きくしてみることが可能となります。

しかし、何も対策を取っていないと、画像、ラジオボタンなどのフォーム部品と後に続く文字が重なり合ってしまいます。img要素やinput要素の後に続く文字列がこれらの要素と重なり合ってしまいます。

<p>リンクを貼るのには、
<img src="img.png" width="26" height="27" alt="リンクの挿入">
ボタンを使用します。</p>

無対策でInternet Explorer7で125%に拡大したとき

こういう現象を防ぐためには、以下の2つの対策を取ります。

  1. CSS側で、IEの独自拡張であるzoomプロパティの利用
  2. HTMLの変更

CSS側の変更

すでに外部CSSファイルが作られているとして説明します。V11以降の方はCSSエディタを利用するといいでしょう。使い方は、「CSSエディタを使ってみる」で解説しています。V10以前の方は、CSSファイルをメモ帳などのテキストエディタで直接編集します。

手っ取り早いのは、

*{zoom : normal;}
span,label{zoom : 1;}

とすることです。

*はユニバーサルセレクタと言って、全ての要素に適用されます。セレクタが競合する場合、CSSの適用優先順位はもっとも低くなります。

もし、ユニバーサルセレクタを利用するのはちょっとという場合、利用するブロック要素がわかっているのであれば、要素ごとに指定するのもありです。

HTML側の変更

<p>リンクを貼るのには、
<img src="img.png" width="26" height="27" alt="リンクの挿入">
<span>ボタンを使用します。</span></p>

画像を使っている場合は、img要素に続く文字列の部分をspan要素でマークアップします。ラジオボタンやチェックボックスといったinput要素を使っている場合はlabel要素の方がより適しています。

で、これらの変更を施すと、

対策後、Internet Explorer7で125%に拡大したとき

これで、ズーム機能を使ったときにも画像と文字が重なり合う現象は解決されます。

どうしてHTMLとCSS両方変更なの?

なぜ画像の後に続く文字列が重なり合う?

レイアウト情報を持っている要素の後にレイアウト情報を持たない文字列が続くからです。

実は、Internet Explorer5.5から、HasLayoutというプロパティが全ての要素に用意されています。HasLayoutプロパティというのは、その要素がレイアウト情報を持っているかどうかという情報です。true/falseのいずれかの値を取り、trueであればレイアウト情報を持っていて、falseであればレイアウト情報を持っていません。

デフォルトで、HasLayoutがtrueになっている要素は以下の要素です。

上記した5つの要素以外は全てHasLayoutがfalseとなります。

HasLayoutの値を変更するためにはいくつかのCSSプロパティを使えば変更可能ですが、もっとも影響が少ないのはzoomプロパティです。zoomプロパティに何か値を入れると、hasLayoutの値が変わります。数値を指定するとhasLayout=trueとなり、normalを指定するとhasLayoutの値はデフォルトのままとなります。

さて、先ほどのサンプルでは、2つのセレクタに対してzoomプロパティを使いましたね。*(ユニバーサルセレクタ)とspan,labelというセレクタでした。

*{zoom : normal}としたのは、全ての要素のhasLayoutの値をデフォルトのままにしますよということです。

span,label{zoom : 1;}としたのは、span要素とlabel要素のhasLayoutの値をfalseからtrueにします。こうすることで、span要素やlabel要素にレイアウト情報を持たせることができます。

*{zoom : 1}ではダメなのですか?

ダメです。

*{zoom:1}として、IE7でズーム機能を使うと、以下のような問題が出ます。

論より証拠ですので、サンプルページを参照して下さい。

HTMLも変更するのはなぜ?

これは、HasLayoutの値をfalseからtrueに変更させるために必要となるからです。

レイアウト情報を持っている要素の後にレイアウト情報を持たない文字列が続くから画像の後に続く文字列が重なり合うと最初に説明しましたね。だから、元々レイアウト情報を持っていない要素にもレイアウト情報を持たせることで解決します。
ですがが、これをするためには、セレクタに対して指定する必要があります。CSSで指定できるセレクタはあくまで要素、class、idといったものでしか指定できません。やむを得ない処置ですが、img要素の後に続く文字列の部分をspan要素でマークアップします。