YUIのCSSを使ったページのリンクをクリックした瞬間、デザインが崩れる(テキストのサイズが大きくなる)問題の回避方法がありました。
次の記事に記述があります。
IE でリンクをクリックするとフォントサイズが小さくなる - METAREAL
上の記事のあるように、YUIのcssを読み込んだあとで、次をcssに記述したところ、回避できました 
-
* {font-size:100%;}
関連記事
次の記事で、Internet Explorer6でYahoo! UI LibraryのCSS(font.css)を使用したページを見るとデザインが崩れる場合があると書きました。
Yahoo! UI LibraryとInternet Explorer6は相性が悪いのかな
今日、確認したところ、この問題は確認できませんでした。
(上記記事にも追記しておきました。)
どうしてかなぁ。
Yahoo! UI LibraryのCSSを使用したXOOPS(XOOPS Cube 2.0)のテーマを作成してみました。
背景が白のシンプルなテーマです。
Yahoo! UI Libraryがサポートしているブラウザの一覧は、次のページにあります。
Yahoo! UI Library: Graded Browser Support
ダウンロード
セットアップ
- The Yahoo! User Interface Library (YUI)から、Yahoo! UI Library(yui2.3.1.zip)をダウンロードします。
-
XOOPS_ROOT_PATH(※)に、Yahoo! UI Library(yui2.3.1.zip)を展開します。
※ XOOPS_ROOT_PATHは、XOOPSをインストールしたディレクトリで、mainfile.phpに記述されているパスです。
Yahoo! UI Libraryは、次のようなディレクトリに配置されることになります。
XOOPS_ROOT_PATH/yui -
yuidefault_2.zipをXOOPSのテーマディレクトリで展開します。
XOOPSのテーマディレクトリは、XOOPS_ROOT_PATH/themesです。
-
管理画面の[システム管理]->[一般設定]->[一般設定]で、デフォルト・サイトテーマを「yuidefault」を選択して、送信ボタンを押下します。
ホームページにテーマが適用されない場合は、一度ログアウトします。
追記(2007年9月24日)
「Yahoo! UI LibraryとInternet Explorer6は相性が悪いのかな」の問題が再現しなくなったため、style.cssを修正しました。
WordPressのEasyAlテンプレートを使用したページを、Internet Explorer6で見ると、olタグ内の項目の番号がすべて1になっていました。
wp-content/themes/EasyAll/style.cssの次の部分を削除(コメントアウト)したところ、問題が解消しました。
-
#content div.post div.storycontent ul, #content div.post div.storycontent ol {
-
margin-left: 0;
-
padding-left: 0;
-
}
-
-
#content div.post div.storycontent li {
-
margin-left: 30px;
-
width: 85%;
-
}
WordPressのiG:Syntax Hiliterプラグインをインストールに投稿した「Internet Explorer6だと、行番号がすべて1」になる問題も解消しました。
この変更で、Firefox、InternetExplorer6では影響はないように見えますが、しばらく様子をみたいと思います。
追記:2007年9月24日
上記に引用したcssの部分をすべてコメントアウトせずとも、「width: 85%;」のみを削除することで、問題は解消しました。
Yahoo! UI Libraryを使用したページをInternet Explorer6で表示して、リンクをクリックすると、テキストのサイズが大きくなり、デザインが崩れます。
YUI Library Examples: TreeView Control: Default TreeViewのTreeviewのサンプルでも、ラベルの部分をクリックすると一部のフォントサイズが大きくなり、ページ全体のデザインが少し崩れます。
Yahoo! UI Libraryのcssを使用しないでTreeviewを作成した場合には、このようなことにはなりませんでした。
YUI付属のfonts.cssにある次の定義が問題になるようです。
-
body {font:13px/1.22 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}
次のようにbodyのフォントスタイルを上書きして、フォントが大きくなることは避けられました。
(「*font-size:small;」を削除しました。)
-
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のバージョンアップで解消されたかは、不明です。