[みんなのお題]ie7の「ページの拡大」によるレイアウト崩れは「letter-spacing」で回避できる？

この記事のトピック

• Internet Explorer 7「ページの拡大」機能でレイアウトが崩れる
• 「letter-spacing」で「ページの拡大」時のレイアウト崩れを回避

Internet Explorer 7「ページの拡大」機能でレイアウトが崩れる

こんにちは。“時代の3歩先をねらうWeb屋さん”ミキ・オキタです。
このブログ「WebClip ウェブデザインのニュース」では、Webデザイン・Webマーケティングの話題をお届けしている。

今回は、Web制作者にとって悩ましいブラウザの問題のひとつ、Internet Explorer 7の「ページの拡大」機能によるレイアウト崩れの回避方法について。
僕の知る限り、この問題は長く回避方法が無いとされてきたが、最近その解決策とおぼしきものが発見された。

Internet Explorer 7から「ページの拡大」という機能が追加された。ブラウザの右下にあるボタンで、ページ全体を拡大できるという機能。以前のバージョンでは文字しか拡大されなかったので、アクセシビリティの点からもページ全体が拡大されるのは好ましいはずだった。

しかし、Web制作者にはおなじみの話だが、この「ページの拡大」機能、実際はひどいものだ。通常のコーディングでWebページを制作していても、「ページの拡大」機能を使った瞬間にレイアウトがめちゃめちゃに崩れてしまう。これではせっかく拡大しても、読めたものではない。
その上、何故こんな現象が起こるのか、多くのWeb制作者が挑んできたものの、これまで回避方法は長く見つからないままだった。

しかし、最近になって富士通がこの問題に解決策を見出したという情報が入った。富士通は日本のアクセシビリティ業界でもリーディングカンパニーだ。富士通のアクセシビリティへの姿勢は素晴らしい。Windows VISTA発売にあわせて、そのプライドをかけてこの問題に取り組んだらしい。その結果、解決方法を見出したとのことだった。
だが、その具体的な回避方法は公開されていない。

日経パソコン - IE7で拡大したとき正しく表示できない

ITPro - パソコンメーカーの威信に懸けVista/IE7に対応 富士通

僕は富士通のサイトのスタイルシートを徹底検証してみた。その結果、Internet Explorer 7の「ページの拡大」機能によるレイアウト崩れの回避方法とおぼしきものを見つけることができた。

「letter-spacing」で「ページの拡大」時のレイアウト崩れを回避

Internet Explorer 7の「ページの拡大」機能は、非常に問題がある。たとえば、普通にテキストと画像を並べただけでも、Internet Explorer 7の「ページの拡大」機能を使うと文字が重なってしまう。

普通のコーディングで、テキストと画像を並べた。

Internet Explorer 7の「ページの拡大」機能で、拡大すると文字と画像が重なってしまう。画像は125%拡大時。

ここで、親になるタグに「letter-spacing」の値を設定する。すると、Internet Explorer 7の「ページの拡大」機能でも崩れなくなる！

親になるタグのスタイルシートで「letter-spacing」の値を設定する。

Internet Explorer 7の「ページの拡大」機能でもレイアウトが崩れない！

何故、これで回避できるのか？　正直、僕もまだわからない。自分でも見つけたとき驚いた。ただ、他のいくつかのパターンでも検証しても、一律これで回避できた。

しかし、ここで実コーディングに詳しいWeb制作者の方であれば気がついただろう。この「letter-spacing」、そもそもはInternet Explorer 6や7で、バグがあり、正しく動作しないために敬遠されているスタイルシートだ。

「letter-spacing」は、文字間を設定するためのスタイルシートだ。しかし、Internet Explorer 6や7では、これに値を設定したとき、<br />タグが正しく認識されないという、これまた致命傷のようなバグがある。

たとえば、「letter-spacing」の値に「0.1em」を設定して、<br />タグを多く含んだHTMLを表示してみる。正しく表示されれば、空行が3行入るはずだ。

何も設定していない普通のテキストだと、空行が3行入る。

「letter-spacing」の値に「0.1em」を設定すると、<br />が正しく動作せず、空行が1行しか入らない。

幸い、この問題には解決法が確立されている。「letter-spacing」の値に「0」したときのみ、<br />が正しく認識される。

letter-spacingの値が0であれば、<br />が正しく動作し、空行が3行入る。

Internet Explorer 7の「ページの拡大」機能の回避としては、これが活用できる。
つまり、Internet Explorer 7の「ページの拡大」機能でレイアウト崩れを回避するためには、以下のスタイルシートを親となるタグに設定すればよい。

極端に言えば、以下の一行をスタイルシートに追加することで、Internet Explorer 7の「ページの拡大」機能でレイアウト崩れを回避することができる。(もちろん、ページ内の他の箇所でletter-spacingを使っていないことが前提)

ただし、あくまでもこの内容は、僕個人の検証できる範囲でのテスト結果にすぎない。あらゆるケースにおいて、この方法で解決できる保証は一切ない。また、そもそも何故レイアウト崩れが起こるのか、何故この方法で問題が解決できてしまうのかもわからない。なので、この内容について追加の情報がある方は、ぜひこの記事にコメントやトラックバックで情報提供をしていただきたい。また追加での検証結果があれば、ぜひご自身のブログにアップしていってほしい。その意味で、この記事はCNET Japan 読者ブログの「みんなのお題」として投稿させていただければと思う。

なお、今回の内容について、実際にコーディングしたサンプルを作成して、以下に置いておいたので、参考にしてほしい。

ie7の「ページの拡大」によるレイアウト崩れは「letter-spacing」で回避できる？ - サンプル

※追記 2008年1月9日 ページ内の他の箇所でletter-spacingを使っていた場合は、bodyや必要箇所では値を設定し、brタグにletter-spacing: 0;を設定することで、Internet Explorer 7の「ページの拡大」でも崩れず、また文字間も調整することができる。具体的には次のようにする。

このbrにスタイルを設定するテクニックは、次のブログの記事を参考にさせていただいた。

TRANS [hatena] - letter-spacingをマークアップする際の注意点