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

症状

ウィンドウの高さをドラッグで変化させていると、左フロートに回り込んでいるファイル選択コントロール（<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用標準モードと互換モードではこの不具合は発生しませんでした。

関連記事

スポンサーリンク

CakePHP、Symfony、Zend Frameworkの比較

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

上に戻る