フロートが先行する要素が生成したボックスの下辺より上部に置かれてしまい、内容物が重なってしまうことがある。
- Category: Mac, Safari, ver.3 Under
- Tag: float
例示
<form action="./">
<dl>
<dt style="float:left; clear:left; width:6em;">Textarea</dt>
<dd style="margin-left:6.5em;"><textarea style="width:10em; height:4em;"></textarea></dd>
<dt style="float:left; clear:left; width:6em;">Input</dt>
<dd style="margin-left:6.5em;"><input type="text" style="width:10em;" /></dd>
</dl>
</form>Safariではinput要素の入力ボックスがtextarea要素の入力ボックスに重なるそうです。
報告書き込み
dt{
width : 8em;
float : left;
clear : left;
}
dd {margin-left:8.5em;}
<dl>
<dt>name</dt>
<dd><input></dd>
<dt>message</dt>
<dd><textarea></textarea></dd>
<dt>password</dt>
<dd><input></dd>
</dl>
とやると、Mac+Safariでpassword入力欄がtextareaに重なるらしい。
詳しいソースは質問スレッドの507。
>textareaだけrow属性のため他より高さがあるんだよね。
>たぶんSafariはこのバグと同じ解釈なのでは。
>
>先行するフロートの上方に後続のフロートが置かれる
>http://cssbug.at.infoseek.co.jp/detail/winie/b093.html
>http://cssbug.at.infoseek.co.jp/detail/opera/b044.html
