MacIE5でTextAreaが文字化け

先日某所経由で教えて頂いたのですが、特定の条件でコメント欄(textareaタグ)に日本語で書き込もうとすると文字化けしてしまうとのこと。

検証してみましたが、このBlogに限らず、以下の条件に当てはまる場合は文字化けするようです。Win環境の制作・閲覧の落とし穴デス。(mikekoさんありがとうございます。)

[条件]
Macintosh Internet Explorer5x
文字コード　->　UTF8
<
textarea></textarea>に日本語入力

以下で解決策を…

解決策・FontFamilyを与える

WEBプログラミング NOW!さんによると、根本的な原因はブラウザ(MacIE5x)側にあるようです。エンドユーザー側の設定での解決方法もあるようですが、それでは皆に優しいWebではありませんので、CSSで対処します。以下のようにCSSに追記をしてあげます。(念のため、inputとselectにも同じ値を与えておきます。)

textarea,input,select{
font-family:Osaka,Verdana,Arial;
}

でもって、takech netさんによると、metaの文字コードの記述も順序が違うとMacIEでは問題があるそうなんだが、けれどもこれは「ココログ」でのお話。MTでは問題ないはず…です。

更にMacIEはmetaタグ内の文字コード認識にも問題があるらしく、
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
これだとUTF-8コードを認識せず、
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
こおすると認識するそうです。 (引用/takech.net)

応用・それをMacIEだけに読み込ませる

うちでは、CSSをMovableTypeのテンプレート機能ではなく、完全独立のファイルにして、FTP転送しています。

上記の問題もMacIEに限ったことなので、専用のCSSファイルをひとつ作り、MacIEのみに読込みさせたほうがスマートなので、import.cssをページにリンクさせて、NN4x、IE4xの除外、WinIE5(調整未着手です)、MacIE5の差分ファイルを読み込ませています。

今使ってるCSSファイル

• import.css /*インポート用->これをhtmlファイル等に読み込ませる
• global.css /*全体のレイアウト用
• entries.css /*エントリー部分用
• sidebar.css /*サイドバー用
• ie5win.css /*WinIE5用
• ie5mac.css /*MacIE5用

今使ってるimport.cssの中身

@charset "UTF-8"; /*文字コードを指定*/
@import "global.css"; /*パーツ用のCSSの読込*/
@import "entries.css";
@import "sidebar.css";
/* ///// WinIE5用の読込 ///// */
@media tty {
i{content:"\\";/*" "*/}} @import 'ie5win.css'; /*";}
}/* */
/* ///// MacIE5用の読込 ///// */
/*\\*//*/
@import "ie5mac.css";
/**

昨日の戯言>
ワンタンを　机にこぼし　汁の海