ブログとブラウザについて

質問

先日、ライブドアでブログスペースを借り、ブログを始めました。
ブログを付けるのは初めてなもので分からないことだらけなんですが、
IEでブログを閲覧した場合と、Firefoxで閲覧した場合に、レイアウトにズレが生じてしまいます。
常にFirefoxを使用しており、Firefoxでしか自分のブログのレイアウトを確認していませんでした。
ですが、今日IEで閲覧したところレイアウトがすごくズレていて・・・。
特に記事本文がガタガタになっていました。
改行を考慮して1行に文章をまとめていたのに、IEでは2行にわたって本文が続いていたりしていて。
デザインは"デフォルト2005 (ブラック)"を使用しており、カスタマイズ出来るのでCSSを確認してみました。

.main,.mainmore{
font-size:x-small;
margin:10px 20px 0;
text-align:left;

最初、上記のようになっていたのを、

.main,.mainmore{
font-size:9;
margin:10px 20px 0;
text-align:left;

ブラウザ間でCSS内の"x-large"や"x-small"にズレがあるのかと思ったもので、上記のように直しました。
するとIEではレイアウトがきれいに整ったんですが、Firefoxでは文字が小さすぎて非常に読みづらくなってしまいました。
フォントサイズには、ブラウザ間で差があるのでしょうか。
上の方法はIEで見やすくなったのは良いんですが、Firefoxで見にくくなってしまうのはどうも・・・。
既にたくさんの記事を書いたので、新たに行を整え直すというのは困難を極めます。

同じフォント、同じフォントサイズにも関わらず、ブラウザによって微妙に生じてしまうズレを無くすのは不可能なのでしょうか。
ちなみに、CSSの知識については皆無なので、上記のようにフォントサイズを変えるくらいしか出来ません。

分からないところがあれば訊いてください。 難なく補足します。
贅沢な質問かもしれませんが、回答よろしくお願いします。

回答No.1

SpiceGirl · ベストアンサー

font-size:9;
これに大きさを示す単位が抜けております。

font-size: xx-large;
font-size: x-large;
font-size: medium;
font-size: small;
font-size: x-small;
font-size: xx-small;

上記指定をピクセル指定すると
font-size: 30px;
font-size: 24px;
font-size: 16px;
font-size: 12px;
font-size: 10px;
font-size: 8px;

となります。単位の確認をしてみてはどうでしょうか。

お礼

回答ありがとうございます。

ピクセルで合わせてみると、レイアウトがほぼ一致しました。
これでレイアウトの崩れが無くなりそうです。
ありがとうございました。

回答No.3

flowermaze

結論から言うと、どのブラウザでも必ず同じフォントサイズで読んでもらうのは不可能です。
特に、「x-small」の形式を使った指定方法は、ブラウザの違いと、閲覧者の文字サイズ初期設定により、さまざまなサイズで表示されるようになります。

ピクセル数で文字サイズを指定すればかなり揃いますが、Macだと文字の表示方法がだいぶ違うので、１行におさまる文字数はやはり変わってきます。
また、ブラウザによっては、ピクセルサイズをスタイルシートで指定している文字でも、閲覧者が文字サイズを変更できる機能を持っているものもあります。

＞改行を考慮して1行に文章をまとめていたのに
結局のところ、Webではこのような改行をしないことが一番の対策といえます。そうすれば、ブラウザが適当なところで折り返してくれますので。

お礼

回答ありがとうございます。

揃えるというのは不可能なんですか・・・。
一応、ピクセルで指定してきれいに整ったんですが、全ての環境できれいに見えるというわけではないんですか・・・。
今回の件で、レイアウトは難しいものだということを実感しました。

ありがとうございました。

回答No.2

orange001

IEは、書かれたhtmlに多少の間違いがあっても
適当に解釈して「見える」状態にしてしまいますし、
CSSの解釈も不完全だそうですので、
Firefoxで見てキレイになっていればいいと思いますが、
世の中はIEユーザが大半なので、そうもいきませんよね。

font-size:9;　これがIEでどの大きさに解釈されたのか判りませんが、
確かに9pxでは小さ過ぎますね。
本文なら12pxくらいは欲しいです。
#1の方が書かれたようにpxで指定してあげれば
IEでもFirefoxでも変わらずに表示されると思います。

お礼

回答ありがとうございます。

そうなんです、見た目が良くないとって思ってしまいますんで・・・。
ピクセルでフォント指定をしたところ、なんとか崩れもなくなりました。
ありがとうございました。