スタイルシートでフレーム枠を隙間なくピタリとつける。

質問

よろしくおねがいします。
http://www.sonzai.net/test/test.html
参考URL↑
中央に<iframe>を置き、それを囲むようにフレームを設置したいのですが、
下辺だけ微妙に離れてしまいます。
【HTML】
<div id="subnavibar">
<p><img src="images/top/event.png" width="220" height="50" /></p>
<img src="images/top/event.png" width="10" height="300" /><iframe src="a.html" width="200px" height="300px" scrolling="yes" frameborder="0" name="side"></iframe><img src="images/top/event.png" width="10" height="300" />
<p><img src="images/top/event.png" width="220" height="20" /></p>
</div>

【css】
#subnavibar {
width: 240px;
float: left;
background-color: #ffffff;
height: 100%;

}

原因としては、何があるでしょうか？

回答No.2

think49 · ベストアンサー

> 原因としては、何があるでしょうか？
「img要素の基準線としてbaselineが指定されているから」だそうです。(調べて知りました)
対策は2つあります。

1. 空白文字を取り除く
<div id="subnavibar">
<p><img src="01.gif" width="220" height="50" /></p>
<img src="02.gif" width="10" height="300" /><iframe src="a.html" width="200px" height="300px" scrolling="yes" frameborder="0" name="side"></iframe><img src="02.gif" width="10" height="300" /><p><img src="03.gif" width="220" height="20" /><BR><BR>赤のバーがピッタリとくっつきません。</p>
</div>

2. vertical-align:bottom; を指定する
<style type="text/css">
img,iframe { vertical-align:bottom; }
</style>

Export-Japan Blog » Blog Archive » IEで、画像の下に隙間ができたり、逆に隙間がバラバラだったり
http://www.export-japan.co.jp/blog/2007/06/21/ie%E3%81%A7%E3%80%81%E7%94%BB%E5%83%8F%E3%81%AE%E4%B8%8B%E3%81%AB%E9%9A%99%E9%96%93%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%9F%E3%82%8A%E3%80%81%E9%80%86%E3%81%AB%E9%9A%99%E9%96%93%E3%81%8C%E3%83%90%E3%83%A9/

回答No.3

edct1

なぜか改行場所を変えただけで、IE8では引っ付きました。
理由は分かりません。

<DIV id=subnavibar>
<P><IMG src="test.files/01.gif" width=220 height=50></P>
<IMG src="test.files/02.gif" width=10 height=300><IFRAME height=300
src="test.files/a.htm" frameBorder=0 width=200 name=side
scrolling=yes></IFRAME><IMG src="test.files/02.gif" width=10 height=300><P><IMG src="test.files/03.gif" width=220 height=20>
<BR>

回答No.1

noname#119508

Firefoxならくっついてますよ。
<div id="subnavibar">
<img src="01.gif" width="220" height="50"><br>
<div style="clear: both;">
<img src="02.gif" width="10" height="300" style="float: left;">
<iframe src="a.html" width="200px" height="300px" scrolling="yes" frameborder="0" name="side" style="float: left;">a.html</iframe>
<img src="02.gif" width="10" height="300" style="float: left;">
</div>
<img src="03.gif" width="220" height="20">
</div>
↑これに変えてみてください
「 /」はXHTMLで作ってないからいらないですよ。