解決済
heightを平気で無視する新興ソフトウェアにはも～うんざり！
今日もウェブサイトをつくっていました。IEと、Operaというソフトウェア、Firefoxというソフトウェアで表示の確認をしたところ、後者2つに面白い結果がでました。
bodyのマージン・パディングはまったく無しです。
<div style="height:100px;border-bottom:solid 1px;">
<h1>ようこそウェブサイトへ</h1>
</div>
これで表示すると、100pxのボックスdivの、上部に「ようこそウェブサイトへ」が表示されます。
これは納得できます。3ソフト同様でした。
ところが僕は、この「ようこそ...」を下のほうにおきたかったので、
h1 style="margin-top:60px;"
としました。
つまり、h1の上部をぐいっと空けることで下に寄せようと思ったのです。
IEでは思惑通り行きました。
ところが、OperaとFfというソフトウェアで表示したら、
<div>ごと下に下がったのです!
これでは意味がない!
結局h1はボックスの上部のままなんですね。
<div>の上部に60pxの空白が出来ました。
いや、Opera,Ffはピクセル感覚がないので、たぶん60ピクセルより多いはずです。
それからもう1事例。
こんども、bodyのマージン･パディングは0です。
<div style="height:20px;font-size:14px;padding:3px;...."></div>
というボックス（ページ上部に表示されるバーなんですが）を作り、
その中に、<a>リンクをいくつか入れました。
するとどうでしょう。
IEでは20ピクセルで表示されました。
Opera, Ffでは、30ピクセルくらいでビヨ～ンと縦に延びてしまっているのです!
原因を調べたところ、<a>の下線が原因なのです。
それではと思い、overflow:hiddenを設定しました。
IEではちょっと縦の長さが短くなりました。
hiddenが効いているのです。
OperaとFf、まったく無視!!importantつけてもかわらない。
たぶん、日ごろからIEえなれてきたので
不思議な書き方をしているのだと思うのです。
要するにコーディングの癖です。
OperaとFf用サイトの作り方に詳しい方、
どこかが根本的に間違っていると思うので教えてください。
なお、最初の事象は<h1>の前に
<div style="height:60px;"></div>
を入れて無理やり解決しました。
すっきりしませんが。
2007-07-30 21:31の質問
この質問と回答を読んで役に立った場合は「役に立つ質問」に投票してください。投票が多い質問は、役に立つ質問一覧に掲載され、より多くの人に見てもらうことができます。
Ads By Google
コメント(4)
#1. imq
2007-07-30 23:10:42
悩ましい問題ですね。
位置をずらすときは大体これで逃げていますが。
<h1 style="position:relative;top:60px;">ようこそウェブサイトへ</h1>
スッキリする回答が欲しいです。
2007-07-31 13:01:50
>>#1
やはりpositionですか。
昔はpositionに頼りっぱなしでしたが、
positionこそOpera, Ffは苦手、
どうもpx指定がうまくいかないんですね。
2pxが3pxくらいで表示されるんです。
だから使用を完全に避けているのです。今は。
#3. imq
2007-07-31 19:45:41
どうもFirefoxのmarginは要素の外、IEのmarginは要素の中という解釈をしていて、heightの動作がmarginを含むかどうかで決定的に違うようですね。この辺はFirefoxの方が正しい解釈みたいです。
それとは別にFirefoxはmargin-topの時だけ親要素をはみ出してマージンが発生してしまって（親要素とborder同士がくっつく感じ）、他の方向には親要素からしっかりマージンを取っているのが変ですね。
2007-07-31 21:18:03
