hasLayoutのバグ回避

このブログがおいてある親ディレクトリでは、ホームページ・ビルダーに関する解説をしております。

んで、当然のことながら、図を多用しています。1つのブロック要素の中に、プレーンテキストとimg要素が同時に使われているといった例もまれではありません。

例として、以下のような文章を用意してみます。

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

なお、外部スタイルシートで以下の指定がされているとします。

*{
  zoom : 1;
}

これをそのまま、Internet Explorer7で拡大・縮小をして閲覧すると、崩れます。画像と後に続くプレーンテキストが重なって、何が何だかわからなくなります。

ズーム率：125%

ズーム率：75%

ズーム率：100%（デフォルト。このときは崩れない）

img要素に続くプレーンテキストにはzoom : 1; が効いていません。なお、この現象は、a、abbr、code、kbdといったインライン要素でも発生します。

エレガントではありませんが、以下のような方法で解決することにします。

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

つまり、後に続くプレーンテキストをspan要素でマークアップします。

こうすることで、拡大・縮小を行っても崩れなくなります。

ズーム率：125%

ズーム率：75%

どの要素にhasLayoutがデフォルトでtrueとなっているのかやhasLayoutをtrueにするためにどうすればよいのかは、msdnの以下のサイトを見ると良いでしょう。

http://msdn2.microsoft.com/en-us/library/ms533776.aspx

ちなみに、ホームページ・ビルダーでは、メニューの「書式」→「文字飾り」→「フォントスタイルの設定(SPAN)」でスタイルの設定画面を開いたら、そのまま「OK」ボタンをクリック。これで、span要素でマークアップされます。
でも、メニューで、b,i,s,uとかといった物理要素と同じところにあるんで使うのがためらわれます。

span厨になりそうな予感です。

正直、ブラウザのバグ対策でHTMLも変えなければいけないのが辛いです。