zoomプロパティとインライン要素

1つのブロック要素内で、hasLayoutを元々持っている要素と、持っていない要素が混合している場合に、ズーム機能を使うと悲惨なことになります。

どう悲惨なことになるのかは、実際にIE7でズーム機能を使ってみるとわかりますが、テキストが重なって読めない!というのが主な症状です。

これを解決するには、zoomプロパティを使うのがいいのですが、これまた使い方を間違えると症状が悪化することになります。

サンプルを用意しました。

  1. *{zoom : 1;}
  2. 要素を指定して、zoom : 1;
  3. *{zoom : normal;}
  4. 要素を指定して、zoom : normal;
  5. *{zoom : normal;} 。img要素とinput要素に続くプレーンテキストをspan要素でマークアップし、span,label{zoom : 1;} とした場合
  6. 要素を指定して、zoom : normal; 。その上で、img要素とinput要素に続くプレーンテキストをspan要素でマークアップし、span,label{zoom : 1;} とした場合

おさんぽさんぽに戻る