IEのbodyのmargin-rightの扱い
- [www]
IEで、以下のような組み合わせで表示を行いました。
スタイルシート
#div_frame {
margin-right: 10px;
border: 2px groove #ccc;
padding: 5px 10px;
}
#button_submit {
position: absolute;
right: 10px;
bottom: 10px;
}HTML
<body>
<form action="hoge.cgi">
<div id="div_frame">
<label for="text_name">お名前<input id="text_name" type="text" /></label>
<label for="text_mail">e-mail<input id="text_mail" type="text" /></label>
</div>
<button id="button_submit">送信</button>
</form>
</body>
#div_frameと#button_submitは、それぞれ右マージンと右位置が同じ値のため、表示上は右端が揃うことを期待した指定だったのですが、実際は、#div_frameの方が、さらに20pxほど内側に表示されてしまいました。おそらくは、スクロールバーが表示されるべき分をあらかじめ換算してしまうのでしょう。
ちなみにMozilla Firebirdで同じ表示を行った場合、右側がきれいに揃って表示されます。
表示されていないスクロールバーの幅をあけてくれるのもよしあしです。
同じレイアウトのページが複数あり、コンテンツの文字数はページによって違うという場合に、スクロールバーがページによって表示されていても、常に右端が同じ位置、といったことが期待できます。
ただし、その場合、rightによる絶対位置指定だけ例外になっているのが少々不便な気がします。
ちなみに、positionをstatic以外(absolute or relative)に設定したdivなどをbodyの下に配置し、その中に#div_frameと#button_submitを配置すると、上の例も揃うようになるはずです。ただし、#button_submitのbuttomが期待したとおりになりませんが。
トラックバック
- このエントリーにトラックバック:
- http://frog.raindrop.jp/cgi-bin/mt/mt-tb.cgi/83
コメント