forefoxで幅を％で指定した場合・・・。

質問

forefoxで幅を％で指定した場合にうまく表示されません・・・。

IE6などでは綺麗に隣同士に並んでいるのに、firefoxだとCSSの枠が長くなったりして飛び出されてしまいます。

％の指定って良くないのですか？？
px指定の方が無難なのでしょうか？？

ちなみにホームページを作る際の基準？というか標準の単位って何でしょうか？？

私は普通はpxを使っているのですが、他にも色々あるので少し興味があったので。

すみません、質問が変な方向に行きましたが、何方かお分かりになる方がいらっしゃいましたら宜しくお願いいたします。

回答No.4

NTJ · ベストアンサー

一般論的な答え方をさせて頂きますね。
> ちなみにホームページを作る際の基準？というか標準の単位って何でしょうか？？

「標準の単位」は、ピクセル(px)でしょうね、
しかし、「基準」というのなら、
「%もpxも指定しないのが正しい」とあたしは思います。
画面上で幅指定をするということは、場合によっては利用者には邪魔かもしれません。

例えば、作成者とユーザーではモニタのサイズが同じではないかもしれません。（縦横比を含めて。）
利用される方が弱視の方で、極端にフォントサイズを大きくして利用しているかもしれません。
これらの場合には作成者が「良かれ」と思って指定した幅が、利用者への障害になっているかもしれません。

したがって、%もpxも指定せず、どんなサイズの画面でもどんな大きさのフォントでも、結果的に破綻しない画面設計をする（はみ出したり足りなくても切れたりボロが出たりしない）事が必要かと思います。

・・・まぁ、現在の風潮では、そのあたりは非常におざなりですねえ。

※利用者が極めて限定される場合には、この限りではありません。
※もっともその場合には、「firefoxでの閲覧はご遠慮下さい」で、事足りますが。

回答No.3

noname#19206

＞私は普通はpxを使っているのですが、他にも色々あるので少し興味があったので。
px 単位は固定表示になりますからなるべくやめたほうがいいです。
たとえばブロックの幅が 1000px だった場合、ウインドウ幅 800px のユーザーはブロックが表示領域からはみ出した状態で表示されます。
また、フォントサイズなども px 表示にすると IE で固定表示になり、
弱視の方などがフォントサイズを拡大出来ずに迷惑します。
なるべくであれば em や % などの相対的な値を使ったほうがいいでしょう。

もちろん、これは時と場合によって適宜判断すべきことですが…。

回答No.2

noname#19206

大方こんな状態でしょう。
（以下は説明用のためテキトーに作ったソースです。）

[CSS]
body {background:#EEEEEE;}
.hoge1 {width:800px;border:1px solid #FF0000;height:100px;float:left;}
.hoge2 {width:40%;border:1px solid #0000FF;float:left; padding:2px;margin:2px;}
.hoge3 {width:40%;border:1px solid #008800;float:left; padding:2px;margin:2px;}
.hoge4 {width:auto;border:1px inset;color:#FFFFFF;}
.hoge5 {width:70%;border:1px solid #FF00FF;height:200px;float:left; padding:2px;margin:2px;}
.hoge6 {width:800px;border:1px solid #000000;}

[body]
<div class="hoge5">
<div class="hoge1">
<div class="hoge2">
あ
</div>
<div class="hoge3">
あ
</div>
</div>
</div>

<div class="hoge6">
あはは。
<div class="hoge4"> </div>
あはは。
</div>

上記事例の場合 hoge1 は 800px と絶対値で指定されているため、どのブラウザでも 800px として表示されます。
それに対して hoge5 は 75% と指定されています。
この場合 IE では幅が 800px を超えてしまう場合自動的に 800px 以下へと抑えられます。
しかし非 IE 系では幅が 75% と指定されているため画面幅を基準に 75% の大きさで CSS を表示するのです。
そのため hoge1 の枠をはみ出して表示されてしまいます。

また、hoge6 は幅が 800px と指定されています。
この場合 IE は並べたときに画面をはみ出すようなものを自動的に下へと回りこませて表示します。
しかし非 IE では float:left が指定されている場合横への回り込み状態で CSS が表示され、
その部分でウインドウ幅を基準にして CSS を表示します。
そのため border が重なってしまう仕組みとなっているのです。

[CSS]
body {background:#EEEEEE;}
.hoge1 {width:90%;border:1px solid #FF0000;height:100px;float:left;}
.hoge2 {width:40%;border:1px solid #0000FF;float:left; padding:2px;margin:2px;}
.hoge3 {width:40%;border:1px solid #008800;float:left; padding:2px;margin:2px;}
.hoge4 {width:auto;border:1px inset;color:#FFFFFF;}
.hoge5 {width:800px;border:1px solid #FF00FF;height:200px;float:left;padding:2px;margin:2px;}
.hoge6 {width:800px;border:1px solid #000000;}
.hoge7 {clear:both;}

[body]
<div class="hoge5">
<div class="hoge1">
<div class="hoge2">
あ
</div>
<div class="hoge3">
あ
</div>
</div>
</div>
<div class="hoge7"> </div>
<div class="hoge6">
あはは。
<div class="hoge4"> </div>
あはは。
</div>

これらの問題を修正したものがこちらです。
若干レイアウトが変わっていますが IE でも非 IE でもほぼ同じように表示されているはずです。

回答No.1

noname#20377

一応ソースが欲しい。こっちで実験して事態を把握しないことには何とも回答できないので
==========
padding や marginはwidthで指定された長さの【外側】に付くのだけれど
http://hp.vector.co.jp/authors/VA022006/css/box.html
IE互換モードにはこういうバグがある
http://cssbug.at.infoseek.co.jp/detail/winie/b001.html

そのため、こういう問題が起こったりするがその関連かな？
http://www.keynavi.net/ja/bugh/css_misc.html#w100p