2007-04-30
* { magin: 0;}だけでは物足りない！zoom: 1;を使おうよ！
IE6からIE7が今後本格的にマーケットシェアを取って行くことを考えると、IE7の仕様やバグを考えた上でのマークアップが欠かせないとは思います。でも、僕らはまだIE7がどんなものかが分からない。そのため、とりあえず* { zoom: 1;}を指定しておくことが安全策なのかもしれません。
IE7のZoom機能で、見事にこける。
先日、うちの本体のサイトを更新し終わった際に、スタッフから「あれ、しゃらくのサイトずれてるよ」と指摘されました。更新箇所が多く、CSSも多少いじくったので、どこか消してしまったのかもしれません。そこで、自分のブラウザで確認するも、どうも問題が再現できない。そのスタッフのブラウザを見ると、こんな感じになっていました。
僕のFirefoxで見てみても問題ないし、そのスタッフが使っているIE7でも問題なし。「うーん」と悩んでみるものの、意外と答えは簡単なところにありました。
そのスタッフがブラウジングをする際は、常にIE7のZoom機能「110%」を用い、サイトを拡大させていたからです。で、見事にずれていたというわけです。
Operaは問題なし。もしや、IE7のボックスモデルの解釈の間違いか？
ちなみに、このサンプルのコードはこんな感じでした。サンプルも用意しました。
<ul id="gNavi"> <li><a href="#">ほーむ</a></li> <li><a href="#">あぼうと</a></li> <li><a href="#">こんたくと</a></li> </ul>
ul#gNavi li { display: inline; list-style-type: none; margin: 5px; } ul#gNavi li a { padding: 0.5em 0.3em; border-top: 1px solid #333333; border-right: 1px solid #333333; border-left: 1px solid #333333; text-decoration: none; color: #333333; background-color: #EEEEEE; }
li要素をインラインボックス化して横並びにさせ、その上a要素に余白を与え、リンク領域を広げるというもの。「float: left;使えよ！」という話なのですが、なにせ作ったのが約1年前でボックスモデルやIEのバグをよく分かっていなかったので、そのへんはご愛嬌。
このZoom機能はご存知の通り、Operaにも搭載されています。そこで、上記サンプルをOperaのZoom機能で110％に拡大させてみました。以下の画像がそのスクリーンショット。
特にずれている様子がありません。つまりは、IE7のZoom機能におけるインラインボックスのpaddingかmarginあたりにバグが潜んでいる様子です。
IE7時代にユーザはZOOM機能と文字サイズ拡大機能のどちらを使うのか？
今回のこのエントリーでは、このZoom機能を批判する目的で書きたいわけではありません。それよりも、僕の関心は「IE7が主流になるとすると、ユーザはZoom機能と文字サイズ拡大機能のどちらを用いて、サイトを読みやすくするだろうか？」ということ。
今までIE6を使っていた人はツールバーの「表示」→「文字のサイズ」から文字サイズを変えるかもしれません。また、IE7の新機能を使ってみたい人は画面右下の虫眼鏡マークからパーセントを選んで画面そのものを拡大させるかもしれません。（要はZoom機能を使うということ）このへんはまだまだ未開拓の領域なのだと思います。
ちなみに、IE7のZoom機能は「ctrlと+」で10%ずつ拡大できるので、僕が文字サイズを拡大したい場合は、Zoom機能を使っています。理由は単純で、Firefoxがそのショートカットで文字サイズを拡大できるから、この方法に慣れているのです。
* { zoom: 1;}を使おうよ！
上記のIE7のZoom機能の解釈の問題は、CSSに一行追加すれば事足ります。いわゆる、hasLayoutの問題のよう。hasLayoutについては、コリスさんの「IEでのCSSのバグを回避するhasLayout」がよくまとまっています。コードはこんな感じで。
ul#gNavi li { zoom: 1; }
上記サンプルだと少しずれてしまいますが、それでも文字と背景がかぶるという不具合は回避できます。
でも、このボックスモデルの解釈の問題は、IE6時代からコーダー泣かせだというのはご周知の通り。そのため、一つ一つzoom: 1;を指定させるよりも、ブラウザの違いを吸収させるためのCSSで指定したほうが手っ取り早い。
僕は、YUIのReset CSSをベースにしているので、こんな感じで指定しています。
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin: 0; padding: 0; zoom: 1; }
先ほどのコリスさんにもこんな記事があり、その中でzoom: 1;の記事があります。（参考記事：CSS スタイルの初期化(前編) -全称セレクタとhtml, body編）
今後、IE7がマーケットを拡大させることを考えていくと、とりあえずzoom: 1;を指定しておけば、かなりの確率でボックスモデルのバグを防げそうなので、こういうのも一考の価値ありかなと思います。
追記（2007年5月1日）del.icio.usのkazuhitoさんのコメントを受けて。
"一考の価値あり"とは思いますけど、仕様にはないプロパティだけに、積極的に使おうとは思わないです。
正直、僕も独自規格は使いたくないのが本音ではあります。たぶん、上記サンプルもfloatさせてブロックボックスを維持してwidthを指定してやれば解決できそうな気もするんですが。あくまで、積極的にというよりも、「仕方がなく」というのが本音です。
