左フロートに回り込んだファイル選択コントロールの高さが変化する

症状

ウィンドウの高さをドラッグで変化させていると、左フロートに回り込んでいるファイル選択コントロール(<input type="file">)の高さが大きくなってゆく。

※標準モードで発生する。ただし、TransitionalのDOCTYPEに適用される標準モードを除く。

例示

<form action="#">
<div style="width:6em; float:left; border:1px dotted red;">File:</div>
<div style="border:1px dotted blue;"><input type="file"></div>
</form>
File:

このページにはHTML4.01 StrictのDOCTYPE宣言を記しています。ウィンドウサイズをドラッグで数回変更してみてください。

スクリーンショット

これはリサイズ後の状態です。

WinIE6WinIE6.0での表示(標準モード)

Moz1.0.2Moz1.0.2での表示(標準モード))

補足

input要素にheightプロパティを指定(inherit, autoを除く)するか、line-heightプロパティ(inherit, normalを除く)を指定すればこのバグを回避できます。Mozilla1.3ではline-heightの指定によるバグ回避ができません。

<form action="#">
<div style="width:6em; float:left; border:1px dotted red;">File:</div>
<div style="border:1px dotted blue;"><input type="file" style="height:1.6em;"></div>
</form>
File:

修正状況

Moz1.0.2/1.2.1では標準モードで不具合の発生が確認されました。Transitional DOCTYPE用標準モードと互換モードではこの不具合は発生しませんでした。

スポンサーリンク

関連記事

スポンサーリンク

Floatbox

ホームページ製作・web系アプリ系の製作案件募集中です。

上に戻る