IEの互換モードだと文字サイズの扱いが他のブラウザと異なります。他のブラウザで font-size: small; でよいものが IE だと font-size: x-small; でなければならない。つまり px や em 指定ではなく small や large など比較サイズで記述すると IE とその他のブラウザではフォントサイズが異なってしまいます。かといって px 指定を使うと IE ではフォントサイズが固定されてしまうためユーザビリティ的によろしくありません。

そこで最もスマートな解決方法は次だと思っています。

• IEの標準モードを使用する
• フォントサイズ指定はsmallやlarge等の比較サイズを使用する

IEの標準モードを使用することによりフォントサイズが他のブラウザと共通化されます。当然ですがフォントサイズ固定はよろしくないのでpx指定は使いません。

ところが「IEではUTF-8のBOMありで保存すると標準モードにならない」というバグを発見しました。このバグに気付くのに2時間もかかってしまいました…(涙) IE6でもIE7でも同じでした。

IEの「先頭行にXMLの宣言を書くと標準モードにならない」というのは有名なバグですが、それと同じなのでしょう。BOMヘッダの先頭3バイトが原因です。この3バイトは目には見えないのでなかなか発見できません。さいてー。

結論として「IEではUTF-8のBOMありは使えない」として覚えておけば良いですね。

ブラウザ全体のスクロールバーを消去するには次のように書けば良い。

document.body.style.overflow = “hidden”;

これは当然だと思っていた。ところがこれはIEの互換モードでの話で標準モードでは違った。

次の通りFirefoxではきちんとスクロールバーが消えているがIEだと消えてくれない。

試しにbody.style.overflow:scrollとしてスクロールバーを強制的に表示させてみると驚いた。

なんとIEの標準モードはブラウザのスクロールバーではなくてbodyオブジェクトのインラインにスクロールバーが展開されてしまう。これには参った。これも他のブラウザと全く違う動作で全然標準とは呼べないような…。

で、どうやってこの余計なスクロールバーを消すのかというと結局こうでした。

すごい独自仕様って感じ。しかもJavascriptから指定しても動かず、静的に指定しておかないとダメみたいです。こんな特殊な仕様、メモしておかないとまたいつかはまっちゃうね。

Flashの背景を透明にすることのできるwmode=transparent指定は不安定で色々とバグがあります。IEだと日本語入力ができなくなることは知っていたけどFirefox君もですか…という印象。

今回は「Flash上のボタンが押せなくなる」という現象に遭遇しました。結局原因は次の条件が重なった場合でした。

• Flash貼り付け時にwmode=transparentを指定している(opaqueも同様)。
• Flashを囲っているdivのposition指定がabsoluteだった。

Firefoxのbugzillaにも登録されていました。

https://bugzilla.mozilla.org/show_bug.cgi?id=318108#c3

ただ、上記は既に解決済みとなっていますが確かに position:fixed の場合は直っていましたが position: absolute の場合にはまだ再現しました。このFirefoxのバグで1時間以上浪費。あ～ぁ。

追記

wmode=transparent & position: fixed でもタイミングによってFlashボタンがクリックできなくなる時があった。おまけに、wmodeを設定しない & position: fixed だとFlashボタンクリック時に100%の確率でFirefoxが落ちてしまったりした。

結局、wmodeを設定しない & position: absolute で落ち着いた。これが一番安定している。Flash背景が透過できないのはデザインでごまかそう。

Vistaに標準添付のメイリオですが使ってみたいなと思ってgoogleで「メイリオ XP」と検索したらすぐにでてきました。なんだ、もう普通に手に入るのですね。

http://nextxp.net/meiryo.lzh

マイクロソフトの公開情報 “JIS X 0213:2004対応と新日本語フォント「メイリオ」について” ではXP用のフォント配布はしていなかったのでVistaが来るまで待っていようと思っていたのですが拍子抜けです。

【MS P ゴシック】

【メイリオ】

このメイリオですが個人的には好きです。何が良いってアンチエイリアス化されたことです。これには賛否両論あるでしょうが、デザイナさんたちは喜ぶ人が多いのではないでしょうか。しかしMacintoshではOSXになった時から既に完全に実現していたわけでWindowsは何年遅れを取ったことか。

さて、これからどんどんと普及していくであろうこのメイリオですが、デザインでこのフォントに正式に対応しているサイトはものすごく少ないですね。Machintosh環境も考慮すると次のようにフォント指定するのが現時点では無難になります。このページもメイリオ対応にしておきました。

自分のブラウザにメイリオを設定しても対応しているサイトが少なくてイヤだと思っている人はIEの「ツール」→「インターネットオプション」→「全般」→「ユーザ補助」にある「Webページで指定されたフォントスタイルを指定しない」をチェックすることで強制的にメイリオを使用できます。

設定を完了したのにFirefoxでアンチエイリアス化されないとお嘆きのあなたには「デスクトップで右クリック」→「デザイン」→「効果」と選択して「次の方法でスクリーンフォントの縁を滑らかにする」を「Clear Type」とすれば見れるようです。

CSSでline-heightを指定する場合、1.5と指定した場合と、150%と指定した場合は全く同じだと思っていたのですが、次の違いがあることを知りました。

line-height:1.5の場合→子ノードに対しても1.5が継承される

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん子ノードテスト。

line-height:150%の場合→子ノードに対して行の高さを計算された結果のピクセル数が継承される

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん子ノードテスト。

つまりline-heightは子ノードの継承を考えると%やpxなどの単位は使わない方が良いという結論です。早速修正しておきましょう。