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 なものを足す。例えば、透明の画像を追加するとか。
参考
- MSDN Online - HasLayout Overview
- http://msdn.microsoft.com/library/default.asp?url=/library/en-us/IETechCol/cols/dnexpie/expie20050831.asp
hasLayout についての詳しい説明。
- Expert Texture - Zoom Bug in IE7
- http://et.cairene.net/2006/10/25/zoom-bug-in-ie7/
CSS で作ってたメニューが崩れた事例。
[2007-03-05 追記] Microsoft サポート技術情報に登録されていた。
- Internet Explorer 7 におけるズーム機能の問題
- http://support.microsoft.com/kb/933053/ja
いろいろ崩れるみたい。