Firefoxだけ文字の大きさの制御がきかないんです。

質問

全体的なテキストの大きさは指定せずに、h2だけ大きさを指定しました。

tdに.menuBarBgを、h2に.menuBarのclass指定したところがあります。

IE6、NN7.2では大きさは制御されているのに、Firefoxではブラウザの「文字サイズ」を大きくすると、それなりに大きくなって、TDからはみ出てしまいます。

ほかのh2は変っても特別問題ないのですが、tdにバックイメージの画像を入れているので、はみ出すととってもおかしいんです。

どのようにしたら良いでしょうか。

body {
margin-top: 0;
margin-right: auto;
margin-left: auto;
margin-bottom: 0;
padding: 0;
color: #333333;
text-align: center;
background-image: url(images/bg.gif);
background-repeat: repeat-x;
background-color: #FFFFFF;

}
h2{
font-size: 16px;
color: #333333;
text-align: left;
padding: 0;
}

/* News title */

.menuBarBg{
background-image: url(images/menubg.gif);
background-repeat: no-repeat;
}

.menuBar{
text-indent: 35px;
margin: 0;
padding: 6px;
}

回答No.5

koutarou504 · ベストアンサー

結論は、「どこかで妥協してあきらめる」という事です。

技術的にも、作成側の期待が反映するのは
ＩＥかその系統（Sleipnir）のブラウザなどです。

まぁ Opera などのズームの場合は画像も一緒に変化しますが、改行などの動作がからみ、レイアウトが変化します。

スタイルシートを振り分けるという考え方も、
ＩＥなどは固定のデザイン、他はサイズ変更を想定したデザインとデザインごと分けるという事しか無理でしょう。

で、基本というか考え方での妥協というか諦める理由の見つけ方として・・・。
１．閲覧者の操作を想定しての配慮事項なら、ＣＳＳを無効にされた場合の配慮はどこに？
２．魅せるという部分ではＨＴＭＬはあまり良い媒体ではないと・・・。読めるなり見れるなり操作できるなりと目的が達せられれば良しと・・・。
３．閲覧者が自分でデザインを崩しているのだからと放置・・・・・。

で、それでもどうしてもという場合は
１．文字データでなく他媒体を用いるとかしてデザインと文字情報を一体化させる・・・。
２．元からサイズを可変で想定して画像を用いる。また画像の背景指定などをする要素（タグ）と文字データを含む要素の親子関係等も意識的に設計する。
３．思い切って画像はやめて背景色に変える・・・。可変に対処しやすいし・・・。

いろいろ言いつつ・・・。
苦労の割りに効果は少しで諦める事が多いし
技術的にも単に何が出来ないという事を学べる程度で・・・。

まぁバグがなければ、背景画像でなく単なる画像として指定しながら位置指定等で重ねて、且つ画像のサイズ指定を相対値でしてしまうという手も考えられるのですがぁ～。（位置指定のバグのせいで、かえって崩れるブラウザも出かねないので・・・）

お礼

推奨を意識しながらデザインもできるだけいいものに・・・というとどこかでやっぱり妥協が必要なのですね。
もうこれ以上ブラウザが増えないことを祈るしかありません。
（あっ・・・サファリ確認してない・・・）
自分を納得させるうえで大変参考になりました。
ありがとうございました。

回答No.4

noname#107580

こんにちは！

最近Web制作から離れているのですが、確かブラウザでフォントサイズが固定されたままになるのはWinのIEだけだったと思います。
（NN7.2は固定されるようになったのですか・・NN7.1では変更出来るのですが・・）

見る側の立場からするとサイズを変更できないことの方が不便な訳ですから、変更出来るブラウザの方が正常だと考えられます。

私的には推奨されないながらも絶対的に固定できる指定方法があっても良いと思っているのですが・・。

取りあえず、崩れて困る部分は画像にする方法しかないかと思います・・。

お礼

見栄えもまぁ良く、更新もテキストでできて・・・なんて思っていたらこうなってしまいました。
できないとわかり、bgイメージの高さを増やしてしのごうと思います。
ありがとうございました。

回答No.3

partita

font-sizeを16pxと指定しているのに、ブラウザの「文字の大きさ」を変更すると、16pxより大きくなる、ときうことですか？

Macのブラウザはpx指定の文字でもサイズを可変にできる、と聞いたことがありますし、どこかで妥協が必要だと思います。#1様の言うように、至難でしょうね。

＞制御されているサイト
アメリカのYahooやMSNなどは参考になりませんか？

お礼

アメリカYahooなども見させていただきました。みなさんのご回答で、フォントサイズの固定が無理とわかりました。
ありがとうございました。

回答No.2

noname#210211

JavaScriptで振り分けるとかというのはどうでしょう。JavaScriptは苦手なので詳しいことを申しあげられないので恐縮なのですけれど。
今はどうかわかりませんがこのサイトもブラウザによってスタイルシートを振り分けていたと聞いたことがあります。

お礼

たびたびすみません。
振り分けるにしても、基本的に文字の大きさをのCSSで指定（固定）した場合、Firefoxで意図したとおりに表示できるかということなんです。

色々サイトを回っているんですが、やはりIEでは固定されていてもFirefoxではブラウザで大きくできてしまうサイトが全部で、まだ制御されているサイトに出会ってません・・・。
やっぱり無理なのかなぁと思っています。
ありがとうございました。

回答No.1

noname#210211

Firefox用に代替のスタイルシートを用意するしかないと思います。どうしても無理ならばデザインそのものを変更するしかないと思いますよ。
スタイルシートは絶対的なものではありません。すべてのブラウザに対応させるのは少々至難の業かと思います。

参考URL：

http://textocean.com/article/7/iefirefox

お礼

ありがとうございます。
Firefox用に代替のCSSということは、CSSで文字の大きさを固定することはできる。ということでいいのでしょうか。