2007年12月7日

Yahoo! User Interface Library(YUI)を2.3.1から2.4.0にアップデートしたところ、textareaの幅が狭く表示されました(Firefox2.0.0.11)。
InternetExplorer6(IE6)では、textareaの表示に関しては、以前と同じように表示されます。

YUIのbase.cssをみると、textareaを次のようにしています。

CSS:
  1. textarea{width:12.25em;*width:11.9em;}

とりあえず、別のCSSで次のように定義し直して、テキストエリアの幅を大きくしました。

CSS:
  1. textarea {
  2. width: 90%;
  3. }

何か違和感があります(特にIE6)が、Firefox2.0.0.11とIE6では、テキストエリアが狭すぎることはなくなりました。

僕の使っているPCが不安定なのか、いつのまにかリンクをクリックした瞬間、デザインが崩れる(テキストのサイズが大きくなる)問題が再現しています(YUI2.3.1、2.4.0)。
YUIのホームページでも同じ現象がでるので、YUIの使い方が悪い訳ではないと思いますが・・・

参考リンク
関連
2007年10月7日

Zend_Session::rememberMe()の使用に関してのメモです。

Zend Framework: Documentationに、次のような記述があります。

セッションの開始前に Zend_Session::rememberMe() を使用すると、セッションクッキーの有効期限を制御することができます。

Zend_Session::start()の後に、Zend_Session::rememberMe() を使用しても、クッキーの有効期限が変化するようです(TODO:詳細調査)。

Zend_Session::rememberMeを使用すると、session_regenerate_id(true)がコールされています(ZendFramework-1.0.1)。
session_regenerate_id(true)をコールすると、session_set_cookie_paramsがsession_startの後でもクッキーの有効期限が変化するようです(PHP 5.2.3)。

Firefox2とInternet Explorer6のセッション関連の振る舞いの違い

Zend_Session::rememberMeを使用しない場合

Firefox2は、ブラウザを閉じても、セッションが継続するようです(クッキーの有効期限は、「セッション終了時」となっています。)(TODO:詳細調査)。
(Firefox2のクッキーに関する設定は、[オプション]ダイアログの[プライバシー]タブの[Cookie を保存する期間]を「サイトが指定した期限まで」に設定しています。)

Internet Explorer6は、ブラウザを閉じると、セッションは継続しません。

Zend_Session::rememberMeを使用した場合

Firefox2は、クッキーの有効期限が設定され、その有効期限の間は、ブラウザを閉じても、セッションが継続するようです。

Internet Explorer6も、ブラウザを閉じても、セッションが継続しました。

その他のメモ

remember_me_secondsに設定する値

Zend FrameworkのAPI Guideに、次の記述があります。

Due to clock errors on end users' systems, large values are recommended to avoid undesirable expiration of session cookies.

大きい値がどのくらいの秒数かわかりませんが、100程度の値だとInternet Explorer6では、セッションをまったく継続できないようです。

次の記事で、Internet Explorer6でYahoo! UI LibraryのCSS(font.css)を使用したページを見るとデザインが崩れる場合があると書きました。

Yahoo! UI LibraryとInternet Explorer6は相性が悪いのかな

今日、確認したところ、この問題は確認できませんでした。
(上記記事にも追記しておきました。)

どうしてかなぁ。

WordPressのEasyAlテンプレートを使用したページを、Internet Explorer6で見ると、olタグ内の項目の番号がすべて1になっていました。

wp-content/themes/EasyAll/style.cssの次の部分を削除(コメントアウト)したところ、問題が解消しました。

CSS:
  1. #content div.post div.storycontent ul, #content div.post div.storycontent ol {
  2.   margin-left: 0;
  3.   padding-left: 0;
  4. }
  5.  
  6. #content div.post div.storycontent li {
  7.   margin-left: 30px;
  8.   width: 85%;
  9. }

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にある次の定義が問題になるようです。

CSS:
  1. body {font:13px/1.22 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}

次のようにbodyのフォントスタイルを上書きして、フォントが大きくなることは避けられました。
(「*font-size:small;」を削除しました。)

CSS:
  1. body {
  2.   font:13px/1.22 arial,helvetica,clean,sans-serif;*font: x-small;
  3. }

フォントサイズに関する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のバージョンアップで解消されたかは、不明です。