私のブログに Firefox 3 で困ったひとからコメントがありました。

[とおる]

初めまして。ITmedia オルタナティブ・ブログでブログを書いている、サンの高橋徹といいます。
実名でのブログになれているので、匿名でなく、実名で書きます。
　
どうも、Windows XP のユーザで、Firefox 3 を使うと表示がおかしくなる事例が出ているようです。サイト側が悪いのかは、わかりませんが、公表したいのでこちらに書かせていただきます。ちなみに、私はMacOSで、そんなに表示には影響が出ていません。

コメントが書かれたURL を以下に書いときますが、問題ないですよね。
http://blogs.itmedia.co.jp/daitaian/200 ... --moz.html

私のブログの内容は、Firefox 3 リリースおめでとう！ってやつです。

個人的な自己紹介ですが、サンですので、サーバ側のソフトウェアを担当しております。むかしのNetscape Enterprise Server、現在、Sun Java System Web Server などの担当者です。なにかありましたら、ご自由にご連絡ください。

[pal]

http://www.w3.org/
でチェックした結果。

エラー121箇所

細かいことですが、閉じタグが
>
だったり、
/>
だったり。
alt
が
at
だったり。

ウィンドウ幅（フォント）の違いによる表示がおかしくなるのは、左が可変で、右が固定にしているのも一因かも。
両方可変にするなり、逆に固定するなりで解消できるかもしれません。
またフォントをある程度指定（決め打ち）しておくのもいいかもしれません。

[とおる]

ITmedia で確認をしてもらいました。私のブログにコメント寄せて頂いたように、

Firefox 3 + メイリオフォント + オルタナティブ・ブログ
　
で左側や右側の字が見えなくなりました。Vista のユーザが全員そうなのかは分かりませんが、上記の状況は、すべて XP にメイリオで発生しています。ご報告まで。

[POCH]

ITmedia で確認をしてもらいました。私のブログにコメント寄せて頂いたように、

Firefox 3 + メイリオフォント + オルタナティブ・ブログ
　
で左側や右側の字が見えなくなりました。Vista のユーザが全員そうなのかは分かりませんが、上記の状況は、すべて XP にメイリオで発生しています。ご報告まで。

OS X でヒラギノ角ゴシック Pro では左側が切れる事は無く表示されています。
で、手持ちの Windows XP にメイリオを入れてみました。
左側が切れているの確認しました。
MS P ゴシックをデフォで設定していますが、これだと左側が切れる事はないようですね。

[Cai]

ITmedia で確認をしてもらいました。私のブログにコメント寄せて頂いたように、

Firefox 3 + メイリオフォント + オルタナティブ・ブログ
　
で左側や右側の字が見えなくなりました。Vista のユーザが全員そうなのかは分かりませんが、上記の状況は、すべて XP にメイリオで発生しています。ご報告まで。

こちらでも WinXP + Firefox 3 + メイリオ + オルタナティブ・ブログ でウィンドウ幅を狭めていくと左側が切れる（スクロール不可）ことを確認しました。MS Pゴシックでは左側が縮んでいって最終的には右から切れていく（スクロール可）通常の動作なんですが...
手元に Vista マシンがないのでメイリオが原因なのか XP + メイリオが原因なのか切り分けられません。

右側を margin-left: -312px としてるあたりが一因なのかなぁ、という気もしますが、両方とも可変（% 指定など）にするとどうでしょうか？

[pal]

手元に Vista マシンがないのでメイリオが原因なのか XP + メイリオが原因なのか切り分けられません。

Vistaでもメイリオにすると左端が切れます。

[あ]

どうも、Windows XP のユーザで、Firefox 3 を使うと表示がおかしくなる事例が出ているようです。

メイリオを使った場合に左が切れるのは、コメント欄の textarea 要素の cols="50" が悪さをしていますね。
cols="50" と指定した場合に、幅が何 px になるのかはブラウザに依存しますし、Firefox 3 の場合であればフォントにも依存します。
それによって、メイリオを使うと、MS Pゴシック 等の場合よりもコメント欄が広がるために、#contents の幅が広がります。
#contents は float: right; になっているため、幅が広がると左に延びていきます。
それが広がりすぎると、左端を超えて延びてしまうので、切れます。

ただし、コンテンツにメイリオを使おうとしているユーザーの環境で、textarea 要素までメイリオになってしまうのは、すべての要素に対して font-family: sans-serif; と指定していたためです。(今は、変更済？のようですが)
textarea 要素とか、フォーム関連要素のような、コントロールっぽい場所のフォントは、基本的にはブラウザのデフォルトに任せるべきで、サイト側で指定するのはリスクが大きいだろう(だろうというか、実際そのせいで結果的に困った人がいたわけですよね。)と私は思っています。