WEB + PC

新ブラウザ、Google Chrome (0.2.149.29) を試してみたら、早速不具合を発見してしまった。
自分のサイト http://library.tail-lagoon.com で「魚」と検索すると、なぜか検索文字が「魁E」になってしまう。Chrom は Safari と同じレンダリングエンジンを使用していると聞いたので、Windows版Safari でも試してみたのだが問題ない（もちろん、IE7 や FireFox3 では既に問題ないことを確認済み）。
うーん、ベータ版ゆえの現象だろうか？

でも、アプリ側の文字コードの処理にも、問題がないとはいえないし、同様のことが別のユーザ・エージェントで起こらないとは断言できない。案外、Webアプリ側で対策すべきことかも。

「魚」という文字のコードについて調べてみると
SJIS : 8B9B
JIS : 357B
EUC : B5FB
UTF-8 : E9AD9A
UTF-16 : 9B5A
で、Shift-JISでよくある 5c文字（バックスラッシュ）でもなさそうだ。
もうちょっと調べてみる必要あり、ってことか。

↓毎回忘れる Win IE7 用の CSS Hack

*:first-child+html #Example {
    /* for WinIE7 */
    margin-top: -1px;
}

↓今のところは忘れていない Win IE6 用の CSS Hack

*html #Example {
    /* for WinIE6 \*/
    margin-top: -1px;
    /**/
}

↓あと、このエントリーで使うことになったバックスラッシュのエンティティ

\ ← Backslash Entity

Sample

　動的出力をするページで、時々、ドキュメントタイプ宣言（!DOCTYPE）より前──つまりソースの第１行──にHTMLコメント文などを出力するプログラムがあるが、これをやると Windows IE の描画がおかしくなることがある。

　散々HTMLソースやらCSSをあちこち確認したあげく、原因がこれだとわかった時の虚脱感はなんともいえないものだ。

　対策は、とりあえずプログラムの該当箇所をコメントアウトして何も出力させないようにするか、DOCTYPE より後になるように調整すれば済むことだけど、プログラム作者が自分じゃない場合などは、バージョンアップの際に元に戻ってしまったりして、しかもこちらもそんな対策をしたことなどすっかり忘れてしまってたりするから、思い出すまであれやこれやするはめになるのだ。

　もし他にどこにも原因になりそうな箇所がないのに、どういうわけか WinIE で表示が変だという場合、ソースの第１行がどうなっているか見落としてはいけない。忘るべからず。

ブラウザの年次別・月別シェア
http://www.w3schools.com/browsers/browsers_stats.asp

(Mac OSX) : ターミナルで下記コマンドを実行する

defaults write com.apple.Safari IncludeDebugMenu -bool true

その後、Safari を起動し、メニュー右に “Debug” という項目が追加されていることを確認。
“Debug” → “Show JavaScript Console” を選択すると、エラーがある場合、ここにメッセージが表示される。

　アドレスバーに "about:config" と打ち込むことで、通常の環境設定ではできない各種設定が可能になる。

　項目内容については、その時々で検索をかければ、たいてい必要な情報が見つかる。

　ぼくが重宝したのは、"browser.search.openintab" を "true" とすることで、検索バーに入力した結果を常に新しいタブで表示させることができるようになったこと。今まで、わざわざ新規タブを最初に開いておいてから検索をかけていたので、その手間がはぶけるようになった。

WinIE で CSS が利かない場合、まずは HTMLファイルと CSSファイルの文字コードが同一であるかを確認すること！
CSS内に日本語のコメントが入っていて、かつ、文字コードが HTMLと違っていた場合、一部（全てではないから厄介。このおかげで原因の発見が遅れる）の CSS指定が利かなくなる現象が見られる。

通常のCSS Link
<link href="ordinary.css" rel="stylesheet" type="text/css" media="screen‚print" />

Safari 専用のCSS Link
<link href="safari.css" type="text/css" media="screen‚print" />

このように rel 属性を除くことで、Safari にしか読み込めなくなる。