IE7でzoomした時のbackgroundの動き

IE7でズームさせた時にbackgroundが一緒に拡大してくれなくて、困ることがたまにあったんだけど何でだろうと思いつつその場しのぎでどうにかしてました。

その現象は以下の2つの条件で起きる模様。

  1. bodyにbackgroundを指定した時
  2. インライン要素に指定した時

(1)bodyにbackgroundを指定した時
拡大しません。bodyに設定したbackgroundに依存したデザインやコーディングをすると拡大した時にレイアウトが崩れちゃう可能性大。
実はコーディングコンテストのコーディングをしてる時に気づいたりしました。

(2)インライン要素に指定した時
<a>とかにbackgroundを指定して、外部リンクにアイコンをつけたり、パンくずに「>」をつけたり、そういうことを結構していたのですが、拡大しても大丈夫な時と駄目な時があってなんでだろうと思っていたんです。
検索してみても、そんなことを書いてあるページにたどりつかなかったので、ちょっと実験。

どうやらインライン要素のbackgroundってことじゃなくて、テキストの中の一部のテキストに指定したbackgroundだけみたいです。これを回避するには、イメージを背景としてではなく直接htmlに記述するしかないんでしょうか。
なんかいい方法ないかなぁ。。。

追記:
どうやら拡大したときに背景がズームしてくれないのはhaslayoutっていうのがfalseだからっぽい。

hasLayoutとは、オブジェクトがレイアウトを持っているかどうかを示すものです。
hasLayoutの値はread-onlyのため読み込みのみ可能で、falseとtrueがあります。

IEでのCSSのバグを回避するhasLayout | コリス より引用

そんなわけでユニバーサルセレクタにzoom:1;を追加してみました。

でもこれだと[サンプル5]でうまくいかない。</a>の後のテキストのhaslayoutがfalseになってるからで、[サンプル6]のように<span>で囲むことで回避できる。
でもでも[サンプル7]のように右側に背景を指定した場合は<span>で囲まなくても拡大してくれたりする :cry:
まだまだわからないことだらけだぁ。。。

webデザイナーを目指してる人の日記
IE7のズーム機能でバグる – hasLayoutとは | Takazudo Clipping*
hasLayout Property (A, ABBR, ACRONYM, …)
IEでのCSSのバグを回避するhasLayout | コリス

Trackback URI: http://blog.ochanocosaisai.com/wp-trackback.php?p=349

気軽に記事を評価してみて下さい。
1 Star2 Stars3 Stars4 Stars5 Stars (3 votes, average: 4.67 out of 5)
Loading ... Loading ...

コメントする

RSS feed for comments on this post · TrackBack URI · add to hatena hatena.comment 3 users add to del.icio.us 3 users add to livedoor.clip 0 user