今まではbody{font-size:12px}等で
完全に固定できたのですが、FireFox2から
なぜか、固定できません。
なので、ブラウザ側の文字サイズを変更すると
レイアウトが崩れます。
このよくわからない仕様の対策を教えていただけますでしょうか?
残念ながら、対策は不可能と思われます。
CSSはユーザー側の指定が製作者の指定より優先しますし、ブラウザによっては、サイズが絶対単位で指定されていても相対単位として解釈されることがあります。
Firefoxはどんな指定をしてもユーザーが自由にサイズを調節できるように解釈するようです(http://www.seo-equation.com/html/css/units)。これは、小さすぎたり大きすぎる文字サイズで固定されると閲覧者にとって不便だからと思われます。
できれば、特定文字サイズでのレイアウトに拘らず、ある程度文字サイズが変化しても閲覧者が読みやすいようなデザインを心がける方がいいでしょう。
対策はありません。
近年、アクセシビリティの観点からも、フォントサイズを固定しようとする考え方自体が避けられています。
一般的にもむしろ、文字サイズが変えられるのが当たり前、というようになってきています。
レイアウトの崩れを避けるためには、高さや幅を指定している他の部分のpx単位(?)での指定を止める(=無指定にする)か、em単位等での指定にするとフォントサイズに合わせた柔軟な対応が可能になるかと思いますよ。
結論のみ端的に申し上げますと、HTML や CSS では不可能です。
もしどうしても文字の大きさを固定したければ、文字を画像化してイメージとして挿入すれば可能です。
以下参考です。
font-size: ~px でフォントサイズを固定できるのは Windows 版 Internet Explorer のみの挙動で、Firefox は2からではなく1の時点からそうだったはずです。
Opera や Safari 等も昔のバージョンからずっと同様で、これは Internet Explorer のみが特殊で、「Web ページのフォントサイズはそもそも固定できないし、してはならないものである」という発想の転換と、ブラウザの文字の大きさが変わってもデザインが大きく崩れないような柔軟なレイアウトを行う必要があります。
これは、様々な機器や環境、身体特性を持つ人が利用することを想定してページを作る「アクセシビリティ」という観点から必要なものです。
日本における Web アクセシビリティ対策の規格として定められている JIS X 8341-3 では、「5.6 a) 文字のサイズ及びフォントは,必要に応じ利用者が変更できるようにしなくてはならない。」とされており、Internet Explorer においても Firefox 等と同様に閲覧者が文字の大きさを変えられるように、px 単位ではなく % 単位や em 単位でサイズ指定をすることが推奨されています。
(富士通ウェブ・アクセシビリティ指針 指針60. 文字サイズ・フォント・および行間は、利用者が変更できるようにする。等も参考になります)
ですので、上記の通り、文字を画像化することによって大きさを完全固定することはできますが、その結果アクセシビリティが低下し閲覧者に不便を与える諸刃の剣であることに注意が必要です。
皆さんありがとうございます。
でも、私的にはこの流れは好ましいとは思ってません。
JavaScriptで文字の大きさ変更の制御仕様と思ってたので。。。
うまくいきませんね。