Yahoo! UI Libraryを使用したページをInternet Explorer6で表示して、リンクをクリックすると、テキストのサイズが大きくなり、デザインが崩れます。
YUI Library Examples: TreeView Control: Default TreeViewのTreeviewのサンプルでも、ラベルの部分をクリックすると一部のフォントサイズが大きくなり、ページ全体のデザインが少し崩れます。
Yahoo! UI Libraryのcssを使用しないでTreeviewを作成した場合には、このようなことにはなりませんでした。
YUI付属のfonts.cssにある次の定義が問題になるようです。
CSS:
-
body {font:13px/1.22 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}
次のようにbodyのフォントスタイルを上書きして、フォントが大きくなることは避けられました。
(「*font-size:small;」を削除しました。)
CSS:
-
body {
-
font:13px/1.22 arial,helvetica,clean,sans-serif;*font: x-small;
-
}
フォントサイズに関するCSSハック - Go my wayに、「*font-size:small;」の解説がありました。
IE7の対策とのことです。
IE6とFirefox2.0.0.6では、この変更で影響はないようですが、いつか他のブラウザ(特にIE7)の影響も見たいと思います。
追記(2007年9月24日):
Internet Explorer6で、2007年9月24日に再確認したところ、この記事の現象は発生しませんでした。
この記事を書いたときの僕のPCの状態が悪かったのか、Windows UpdateでIEが改善されたか、YUIのバージョンアップで解消されたかは、不明です。