CSS/DHTMLバグ辞典スレッド ver2.0

バグって程のもんではないかもしれないけれど気づいたこと。
Macユーザーのページでフォントを指定した
body{font-family:Osaka, sans-serif;}
てなスタイルがありますね。
ex.http://www1.odn.ne.jp/bungaku-shitsu/
　 http://www.vabil.co.jp/~ussy/
これをWinIE5.5で見ますと、なんか文字の高さや太さが揃ってなくて
ガタガタした版面（印刷用語で呼ぶなら）に見える。
どうやらＭＳゴシックではないなんだかわからない書体が適用されてる模様。
拡大して見た所、MS Song（？）とか、そんな日本字に慣れない書体設計と似てます。

マック使ってる人、font-family指定するならOsakaだけでなく
ウインドウズ対策に"ＭＳ　ゴシック""ＭＳ　Ｐゴシック"なんかも入れてね。
私もMac向けに"Osaka-等幅"って入れてるからさ（どんな風に見えるのかは知らんが）。

>>84
Win IE5.5 ですが、どの辺がガタガタなのやら？

>>マック使ってる人
気にすんな。

次のページで確認しよう。>>85
http://east.portland.ne.jp/~sigekazu/css/font_family.htm
WinIE5.5/6
　　一般フォントファミリへの対応が良くはなってはいるが、相変わらず中途半端。確認したWindows 98SE/Me/2000のうち、Me版は一般フォントファミリであるsans-serifの扱いがおかしい。

あ、特に上掲ページのサンプル5-2だね、この場合。

85 じゃないけど，どれもがたがたには見えない．
IE というよりは OS によるのでは？うちは 2000（IE は 6 だけど）．
＃もっとも，「がたがた」という言葉の感じ方の違いかもしれないけど

>>88
すみません、サンプル５-２を文字の大きさ最大にして見ていただけますか。
他の日本語表示テスト（サンプル3-3、サンプル４）と明らかに字の太さが異なり、
別のフォントになってるんですよ――私の場合は。
ちなみに98SEにＩＥ5.5ですが。

あ，英語フォントね…納得．日本語しか見てなかった．
つーことで，やっぱ OS でなくて IE の問題か．

>>90
>あ，英語フォントね…納得．

いえ、サンプル中の「日本語表示テスト」って文字（日本語フォント）に
適用されるフォントの話なんですけど。
それとも、sans-serifだと日本語部分にも「英語フォント」（欧文用フォント）が適用されるってことですか。

>>89
このスタイル指定だったら、
5-2 と 3-3 や 4 のフォントが違っていても
特に何の問題もないと思うのだが。

>>92
いや、指定がsans-serifだったらＭＳＩＥの場合、欧文はさておき日本語の部分は
"ＭＳ Ｐゴシック""ＭＳゴシック"か"MS UI Gothic"で表示されるはずでは？
それ以外のフォントで表示されてるとしたら、それは何か変でしょ。

>91
なんだ違うのか…．じゃあやっぱりがたがたには見えない．文字サイズ最大でも．
>86 のページで 4 と 5-2 の「日本語表示テスト」が違って見えるってことね？
どっかにキャプチャをアップすればいいんだろうけど，とにかく，うちでは違わない．

sans-serif確かに汚いね＠Me+IE5.5

CSS Laboratoryによれば……
http://www.inter-cool.net/~phantasm/wdzone/note/fonts/index.html
「IE5.5
欧文フォントや sans-serif 等を指定した場合に日本語が文字化けすることがある。 （HTML文書の方で言語を指定すれば、文字化けしにくくなったが、完全に回避することは出来なかった。）」
とのこと。

>>95 ……ですよね、やっぱり。
（>>88さんが否定するのでうちのパソコンだけ変なのかと不安になってました）

結局、font-familyプロパティーを使用するならsans-serifのみの指定は避けた方がいいし、
>>84での指摘通り、
マック使ってる人は「Osakaだけでなくウインドウズ対策に"ＭＳ　ゴシック""ＭＳ　Ｐゴシック"なんかも入れて」指定した方がいい
――ってことでまとめてよいのかな。

NN6.1では

body { text-align: center}

を指定してもセンタリングされない見たいなんですが、これって
やっぱバグ？

中央寄せについては下記を参照。
http://www2u.biglobe.ne.jp/~zashiki/css-make/t-a/index.html
http://tancro.stp-1.com/stylesheet/n6_center.html

>97
うーん，否定したつもりはない（事実を書いただけ）けどそうとられたならごめん．
88 にも書いたけどうちは 2000+IE6 なので，違って当然の結果と言える．
86 にも「Me は」って書いてあるし．
引っかき回したようになってすまない．

>99
サンクスです。
・・・参照ページを見た時、ショックで言葉が出なかった。

>>98
CSS でよくある誤解――text-align はボックスの配置用ではない
text-align はボックス内のテキストの水平配置用のプロパティでなので、例えば table を text-align: center を指定した div で括っても、仕様では table 自体は左に寄ったまま、 table 内のテキストだけが中寄せされることになっています。 IE の間違った実装の代表です。
中寄せしたいブロックに対しては margin-left: auto; margin-right: auto と、右寄せしたいブロックに対しては margin-left: auto; margin-right: 0 と指定するのが仕様的には正しく、 N 6 はこれをちゃんと解釈します。
IE では今のところ auto を正しく解釈してくれないので、 text-align や HTML の align 属性と組み合わせて対処するしかないようです。

以上、http://www.cc-net.or.jp/~piro/tips.lzh より

>>93
sans-serif を指定した場合の表示フォントは、既定値はOSによってあるいは、
個人の設定/環境によって異なります。
ちなみに私の場合、sans-serif も serif も MS明朝ですが。

>>103
あなたは正しい。
しかし>>93の言ってるのは設定がデフォルトの儘の場合ってことかと。

>>104
正直、その漢字読めない。

デフォルトのままの場合ってことかと。

「Macの人も、Win用に"ＭＳ ゴシック"って、書いておいてね。」ってあったけど、
NN 4.xにも対応するようにするには、どう書けばいいの？

あと、NN 4.xでは、
body, th, td, div {
color: #fff;
background: green;
font: Osaka 10px;
}
と、fontで宣言すると、ブロックごと無視されるようです。
body, th, td, div {
color: #fff;
background: green;
font-family: Osaka;
font-size: 10px;
}
とすれば、大丈夫。
既出だったら、ｽﾏﾇ。

ごめん。
>>107で、divまでご丁寧にセレクタに入れてるのって、変ですか？

何度もすみません。
NNは、Macの4.5です。

>>107
ＮＮ４にfont-familyは鬼門です。次のページを読んでみてください。

「文字化け対策」
http://east.portland.ne.jp/~sigekazu/css/font_family.htm

ちなみにMacIEでもfont-familyによって文字化けすることがあるとか（未確認）。
（http://www.cc-net.or.jp/~piro/tips.lzhの情報）