フォントサイズの調整 – DOCTYPEの話。

あるサイトを作っていて、フォントサイズを、それまでのピクセル固定から、
相対的な設定に変更してみたのだけど。
IEで見ると、ある程度の大きさで見られるのに、
FireFox（ないしはGecko）でちぇっくすると、
豆粒みたいになって見にくくて仕方がない…ってことがあった。

理由がよく分からなかったので、しばし放置していたのだけど、
ふと思い立って調べてみたら、
『互換モード』と『標準モード』のお話だった。

互換モードってのは、過去のブラウザとの互換性を確保するような感じの話。
一方で標準モードは、W3Cで策定されている規格に忠実に動作するモード。
（参考：ウェブデザイン制作/ウェブ・ポジショニングのウェブZYCO’S [ レイアウト（box要素）と標準・互換モードとの関係 ]）

IEは独自の拡張が多いし、
（というか、Netscapeの拡張の方が多かったし、しかもシェア取ってる
ブラウザの拡張から次の仕様が決まるって言う文化もあったんだ、昔は）
その辺をビシッと慣らすためのモードもあるってことで…

とはいえ、それが上手いこと行かないのが、ブラウザなんだけどね…

まぁそれはともかく、
最初に書いたフォントの問題は、サイトが、
『互換モードで読むように』とブラウザに指示していたために起きたこと。
互換モードでは、IEのフォントサイズの標準の方が、
FireFoxの標準よりも一回り大きいってことなんだな。

この解決のためには、互換モードのままで、
FireFoxだけフォントサイズを大きめにするようにCSSを書くか、
互換モードから標準モードに変換するか、どちらか。
少し考えたけど、CSSハックをそんなことだけのためにするのも何だし、
標準モードで統一した方が、いじりやすいだろうと言うことで、
ヘッダーの、DOCTYPEの記述を変更して、全て標準モードで読まれるように設定し直した。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

　　↓

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

ちなみに、どういう記述をすると、どのブラウザでどのモードで読まれるか…
というのは実はかなりばらつきがあるので、
記述分に関しては、この辺りを参考にした。

miniturbo::Blog DOCTYPEスイッチ
hxxk.jp – DOCTYPE スイッチについての検証とまとめと一覧表

HTML4.01になってるのは、色々ありまして、
『XHTML』を宣言してしまうのは微妙だったので、こういうことに。
この1行を変えただけで、こんなに変わるとは思わなかったなぁ…

大方特に問題なく行けた（元々クロスブラウザを意識してデザインしていたし）けれども、
唯一この問題…標準モードで、Table内に画像を貼ると、隙間が空くと言う問題は、
しばし悩んだ末に、もじら組に関連記事を見つけて解決した。

table内に画像を隙間無く敷き詰めるには注意が必要です #1 – Web標準普及プロジェクト
td及びth要素を使って、画像を敷き詰めたシビアなレイアウトを行おうとした場合、 MozillaではFull Standardモードを使用すると以下のような単純なソースでは意図通りに表示できません。一応、解決策まで公開しますが、tableによるレイアウトは様々なハンディキャップを持つ方に迷惑をかけることになりますので、私は推奨しません。しかし、商用サイト等では相変わらず過去との互換のために使用されることが多いので紹介することにしました。まずは実例を見てください。