IE7: 拡大/縮小を行うと文字がズレる現象

Google の検索結果ページで、IE7 の拡大 or 縮小を使うと、文字がラジオボタンの後ろに入ってしまう。


発生条件

同じ行内で、hasLayout が false なものと、true なものが交互に現れる、かつ、先頭が false の場合に発生するっぽい。
例えば、「文字→画像→文字」とか。上の Google の例だと、「文字 (空白)→ラジオボタン→文字→ラジオボタン→文字」になっている。
文字の間に入るのは、hasLayout が true ならなんでもいいので、

<html>
<head>
<title>拡大/縮小テスト</title>
</head>
<body>
あああ
<span style="width:50">いいい</span>
ううう
<span style="width:50">えええ</span>
おおお
</body>
</html>

これでも発生する。
ちなみに、マウスドラッグで選択しようとすると、本来の位置の方を選択できる。文字のレンダリングだけがおかしいのかな?

回避策

  • 行頭の hasLayout を true にする。例えば、height:1em とか適当なサイズ指定をつければいい。
  • 行頭の hasLayout が false な部分を削る。
  • 行頭に hasLayout が true なものを足す。例えば、透明の画像を追加するとか。

参考

[2007-03-05 追記] Microsoft サポート技術情報に登録されていた。